From 0a5965cc475c646b067e451b8dca4a8739064f2f Mon Sep 17 00:00:00 2001 From: Your Name Here Date: Mon, 11 Mar 2024 12:46:25 +0100 Subject: [PATCH] Implemented a search functionality that allows end-users to quickly find parts or sections of the documentation --- components/search/Search.tsx | 119 +++++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 components/search/Search.tsx diff --git a/components/search/Search.tsx b/components/search/Search.tsx new file mode 100644 index 0000000..2c67a34 --- /dev/null +++ b/components/search/Search.tsx @@ -0,0 +1,119 @@ +import React, { useState } from "react"; +const Search: React.FC = () => { + const [showModal, setShowModal] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + + const contents = [ + { title: "API Logic", description: "How to connect to the API Logic" }, + { title: "Versioning", description: "Common errors and how to fix them" }, + { title: "Payment Link", description: "Make payment easily in few steps" } + ]; + + const filteredContents = contents.filter(content => + searchTerm + .toLowerCase() + .split(" ") + .some(word => + content.title.toLowerCase().includes(word) || + content.description.toLowerCase().includes(word) + ) + ); + + return ( + <> + {/* search input */} +
+ +
+ + {showModal ? ( + <> +
+
+ {/* modal header */} + +
+
+ + + + + +
+ setSearchTerm(e.target.value)} /> +
+
+ {/* Modal component body */} +

Recently viewed

+
    + + {filteredContents.map((contents, index) => ( +
  • +
    + +
    +
    +

    {contents.title}

    +

    {contents.description}

    +
    +
    • + ))} +
+ {/* modal footer*/} +
+
+ + + +
+ + +
+ +
+
+ + + ) : null} + + ); +}; + +export default Search;