update/search-listing

ArunGovil · Dec 6, 2022 · cb88809 · cb88809
1 parent 640e849
commit cb88809
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 68 deletions.
diff --git a/components/CodeCard.tsx b/components/CodeCard.tsx
@@ -56,7 +56,7 @@ export default function CodeCard({ id, title, code }: CodeCardProps) {
           )}
         </button>
         <pre>
-          <code>{code} </code>
+          <code className="text-slate-400">{code} </code>
         </pre>
       </div>
     </li>

diff --git a/components/Listing.tsx b/components/Listing.tsx
@@ -25,7 +25,7 @@ export default function Listing() {
   const returnNotFound = () => {
     return (
       <div className="text-center">
-        <p className="font-thin">No Result Found</p>
+        <p className="font-thin">no commands found</p>
       </div>
     );
   };

diff --git a/components/PrimarySearch.tsx b/components/PrimarySearch.tsx
@@ -1,12 +1,22 @@
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
-import { technology, placeholders } from "../json";
+import { placeholders } from "../json";
+import content from "../content/content.yaml";
 
 export default function PrimarySearch() {
+  const [data, setData] = useState(content);
   const [query, setQuery] = useState("");
   const [isVisible, setVisible] = useState(false);
   const [placeholder, setPlaceholder] = useState(placeholders[0]);
 
+  const filterData = (query: string) => {
+    setQuery(query);
+    const filtered = content.filter((item: any) =>
+      item.title.toLowerCase().includes(query)
+    );
+    setData(filtered);
+  };
+
   useEffect(() => {
     if (query.length > 2) {
       setVisible(true);
@@ -29,24 +39,30 @@ export default function PrimarySearch() {
   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>
+        {data.length > 0 ? (
+          <ul>
+            {data.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>
+        ) : (
+          <p className="mt-2 text-sm font-light text-slate-400 cursor-pointer pt-1 pb-1 pl-1 rounded-md">
+            no commands found
+          </p>
+        )}
       </div>
     );
   };
   return (
     <div>
       <div className="mt-12 flex">
         <input
-          onChange={(e) => setQuery(e.target.value)}
+          onChange={(e) => filterData(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}
         />

diff --git a/components/SearchListing.tsx b/components/SearchListing.tsx
@@ -1,49 +1,25 @@
-import React, { useState, useEffect } from "react";
-import { technology, codes } from "../json";
+import { useState, useEffect } from "react";
 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);
-  };
+interface SearchListingProps {
+  searchData: any;
+}
 
+export default function SearchListing({ searchData }: SearchListingProps) {
   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 className="text-center min-h-[60vh] flex items-center justify-center">
+        <p className="font-thin">no commands found</p>
       </div>
     );
   };
 
   const returnResult = () => {
     return (
       <div>
-        {code.length > 0 ? (
-          <ul className="mb-8">
-            {code.map((item: any) => (
+        {searchData.length > 0 ? (
+          <ul className="mb-8 min-h-[80vh]">
+            {searchData.map((item: any) => (
               <CodeCard
                 key={item.id}
                 id={item.id}
@@ -60,10 +36,8 @@ export default function SearchListing() {
   };
 
   return (
-    <div className="flex flex-col justify-center items-center p-4 w-full min-h-[90vh] max-w-5xl mt-2">
-      <section className="mt-8 w-full">
-        {isLoading ? returnLoading() : returnResult()}
-      </section>
+    <div className="flex flex-col justify-center items-center p-4 w-full  max-w-5xl mt-2">
+      <section className="mt-8 w-full">{returnResult()}</section>
     </div>
   );
 }
diff --git a/components/SecondarySearch.tsx b/components/SecondarySearch.tsx
@@ -1,19 +1,13 @@
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
-import { technology, placeholders } from "../json";
+import { placeholders } from "../json";
 
-export default function SecondarySearch() {
-  const [query, setQuery] = useState("");
-  const [isVisible, setVisible] = useState(false);
-  const [placeholder, setPlaceholder] = useState(placeholders[0]);
+interface SecondarySearchProps {
+  onChange: any;
+}
 
-  useEffect(() => {
-    if (query.length > 2) {
-      setVisible(true);
-    } else {
-      setVisible(false);
-    }
-  }, [query]);
+export default function SecondarySearch({ onChange }: SecondarySearchProps) {
+  const [placeholder, setPlaceholder] = useState(placeholders[0]);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -30,7 +24,7 @@ export default function SecondarySearch() {
     <div>
       <div className="mt-12 flex">
         <input
-          onChange={(e) => setQuery(e.target.value)}
+          onChange={(e) => onChange(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}
         />

diff --git a/content/content.yaml b/content/content.yaml
@@ -72,7 +72,7 @@
   tags:
     - git
     - remote
-- title: View remote url
+- title: Git view remote url
   code: git remote -v
   technology: git
   tags:

diff --git a/content/palceholders.yaml b/content/palceholders.yaml
@@ -0,0 +1,11 @@
+# placeholders
+- id: 1
+  title: create react app
+- id: 2
+  title: git add remote
+- id: 3
+  title: create django project
+- id: 4
+  title: git view remote
+- id: 5
+  title: create express app
diff --git a/pages/details.tsx b/pages/details.tsx
@@ -1,7 +1,16 @@
 import Head from "next/head";
+import { useState } from "react";
 import { Header, Footer, SearchListing, SecondarySearch } from "../components";
+import content from "../content/content.yaml";
 
 export default function Details() {
+  const [data, setData] = useState(content);
+  const filterData = (query: string) => {
+    const filtered = content.filter((item: any) =>
+      item.title.toLowerCase().includes(query)
+    );
+    setData(filtered);
+  };
   return (
     <div>
       <Head>
@@ -11,8 +20,8 @@ export default function Details() {
       </Head>
       <main className="flex flex-col items-center">
         <Header showSearch={false} />
-        <SecondarySearch />
-        <SearchListing />
+        <SecondarySearch onChange={filterData} />
+        <SearchListing searchData={data} />
         <Footer />
       </main>
     </div>

diff --git a/types/index.ts b/types/index.ts
@@ -0,0 +1 @@
+export interface SearchItemProps {}