component/secondary-search

ArunGovil · Dec 5, 2022 · eac3ca3 · eac3ca3
1 parent 1a52837
commit eac3ca3
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 7 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,13 +1,19 @@
 import Image from "next/image";
 import Link from "next/link";
+import SecondarySearch from "./SecondarySearch";
 
-export default function Header() {
+interface HeaderProps {
+  showSearch: boolean;
+}
+
+export default function Header({ showSearch }: HeaderProps) {
   const logo = require("../public/img/cmdr.png");
   return (
     <nav className="flex justify-between p-4 items-center w-full max-w-5xl">
       <Link href="/">
         <Image src={logo} alt="cmdr" className="w-12" />
       </Link>
+      {showSearch && <SecondarySearch />}
       <a target="_blank" rel="noreferrer" href="https://github.com/ArunGovil">
         <p className="font-medium text-sm hover:text-orange-400">@github</p>
       </a>

diff --git a/components/SearchListing.tsx b/components/SearchListing.tsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from "react";
+import { technology, codes } from "../json";
+import CodeCard from "./CodeCard";
+import content from "../content/content.yaml";
+import tabs from "../content/tabs.yaml";
+
+export default function SearchListing() {
+  const [currentTab, setCurrentTab] = useState({ id: 1, title: "reactJs" });
+  const [code, setCode] = useState<any>([]);
+  const [isLoading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    fetchData();
+  }, [currentTab]);
+
+  const fetchData = async () => {
+    const data = content.filter((item) => {
+      return item.technology == currentTab.title;
+    });
+    setCode(data);
+    setLoading(false);
+  };
+
+  const returnNotFound = () => {
+    return (
+      <div className="text-center">
+        <p className="font-thin">No Result Found</p>
+      </div>
+    );
+  };
+
+  const returnLoading = () => {
+    return (
+      <div className="text-center">
+        <p className="font-thin">Loading..</p>
+      </div>
+    );
+  };
+
+  const returnResult = () => {
+    return (
+      <div>
+        {code.length > 0 ? (
+          <ul className="mb-8">
+            {code.map((item: any) => (
+              <CodeCard
+                key={item.id}
+                id={item.id}
+                title={item.title}
+                code={item.code}
+              />
+            ))}
+          </ul>
+        ) : (
+          returnNotFound()
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-center p-4 w-full min-h-[90vh] max-w-5xl mt-8">
+      <section className="mt-8 w-full">
+        {isLoading ? returnLoading() : returnResult()}
+      </section>
+    </div>
+  );
+}
diff --git a/components/SecondarySearch.tsx b/components/SecondarySearch.tsx
@@ -0,0 +1,73 @@
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+import { technology, placeholders } from "../json";
+
+export default function SecondarySearch() {
+  const [query, setQuery] = useState("");
+  const [isVisible, setVisible] = useState(false);
+  const [placeholder, setPlaceholder] = useState(placeholders[0]);
+
+  useEffect(() => {
+    if (query.length > 2) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (placeholder.id < placeholders.length) {
+        setPlaceholder(placeholders[placeholder.id]);
+      } else {
+        setPlaceholder(placeholders[0]);
+      }
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [placeholder]);
+
+  const returnSuggestions = () => {
+    return (
+      <div className="bg-black border p-2 border-slate-800 mt-1 rounded-md w-96 z-50 absolute">
+        <ul>
+          {technology.map((item) => (
+            <li
+              className="mt-2 text-sm font-light text-slate-400 cursor-pointer hover:text-white hover:bg-gradient-to-br from-[#FF4D4D] to-orange-500 pt-1 pb-1 pl-1 rounded-md"
+              key={item.id}
+            >
+              {item.title}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+  return (
+    <div>
+      <div className="mt-0 flex">
+        <input
+          onChange={(e) => setQuery(e.target.value)}
+          className="bg-black border-l border-r border-t border-b rounded-l-lg p-2 border-slate-800 h-12 w-96 max-w-[75vw] text-sm"
+          placeholder={placeholder.placeholder}
+        />
+        <div className="p-2 flex items-center justify-center cursor-pointer bg-gradient-to-br from-[#FF4D4D] to-orange-500 rounded-r-lg text-sm pl-3 pr-3">
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            ></path>
+          </svg>
+        </div>
+      </div>
+      {isVisible && returnSuggestions()}
+    </div>
+  );
+}
diff --git a/components/index.ts b/components/index.ts
@@ -8,3 +8,5 @@ export { default as About } from "./About";
 //components
 export { default as CodeCard } from "./CodeCard";
 export { default as PrimarySearch } from "./PrimarySearch";
+export { default as SearchListing } from "./SearchListing";
+export { default as SecondarySearch } from "./SecondarySearch";
diff --git a/pages/details.tsx b/pages/details.tsx
@@ -1,17 +1,17 @@
 import Head from "next/head";
-import { Header, Hero, Listing, About, Footer } from "../components";
+import { Header, Footer, SearchListing } from "../components";
 
 export default function Details() {
   return (
     <div>
       <Head>
-        <title>cmdr / one stop shop</title>
+        <title>cmdr / one stop directory</title>
         <meta name="description" content="jack of all commands" />
         <link rel="icon" href="/img/frame.png" />
       </Head>
       <main className="flex flex-col items-center">
-        <Header />
-        <Listing />
+        <Header showSearch={true} />
+        <SearchListing />
         <Footer />
       </main>
     </div>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,12 +5,12 @@ export default function Home() {
   return (
     <div>
       <Head>
-        <title>cmdr / one stop shop</title>
+        <title>cmdr / one stop directory</title>
         <meta name="description" content="jack of all commands" />
         <link rel="icon" href="/img/frame.png" />
       </Head>
       <main className="flex flex-col items-center">
-        <Header />
+        <Header showSearch={false} />
         <Hero />
         <Listing />
         <About />