update/search-navigation

ArunGovil · Dec 20, 2022 · f6cbfdf · f6cbfdf · vercel · Dec 20, 2022
1 parent 9f026c5
commit f6cbfdf
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 22 deletions.
diff --git a/components/AddNew.tsx b/components/AddNew.tsx
@@ -0,0 +1,13 @@
+export default function AddNew() {
+  return (
+    <div className="text-center">
+      <p className="font-thin">no commands found</p>
+      <a
+        href="https://github.com/ArunGovil/cmdr#how-do-i-add-a-command"
+        className=" font-thin text-sm underline underline-offset-4"
+      >
+        help us by adding new command
+      </a>
+    </div>
+  );
+}
diff --git a/components/DemoSearch.tsx b/components/DemoSearch.tsx
@@ -0,0 +1,38 @@
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+import { placeholders } from "../utils";
+import { useRouter } from "next/router";
+
+export default function DemoSearch() {
+  const [placeholder, setPlaceholder] = useState(placeholders[0]);
+  const router = useRouter();
+  const handleNavigation = () => {
+    router.push("/search");
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (placeholder.id < placeholders.length) {
+        setPlaceholder(placeholders[placeholder.id]);
+      } else {
+        setPlaceholder(placeholders[0]);
+      }
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [placeholder]);
+
+  return (
+    <div>
+      <div className="mt-12 flex">
+        <input
+          onFocus={handleNavigation}
+          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  bg-gradient-to-br from-[#FF4D4D] to-orange-500 rounded-r-lg text-sm pl-3 pr-3">
+          <p>search</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import PrimarySearch from "./PrimarySearch";
+import DemoSearch from "./DemoSearch";
 
 export default function Hero() {
   return (
@@ -9,7 +8,7 @@ export default function Hero() {
         I don&apos;t need to know everything, I just need to know where to find
         it, when I need it.
       </p>
-      <PrimarySearch />
+      <DemoSearch />
     </div>
   );
 }
diff --git a/components/Listing.tsx b/components/Listing.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import CodeCard from "./CodeCard";
 import content from "../content/content.json";
 import { tabs } from "../utils";
+import AddNew from "./AddNew";
 
 interface tabData {
   id: number;
@@ -37,14 +38,6 @@ export default function Listing() {
     }
   };
 
-  const returnNotFound = () => {
-    return (
-      <div className="text-center">
-        <p className="font-thin">no commands found</p>
-      </div>
-    );
-  };
-
   const returnLoading = () => {
     return (
       <div className="text-center">
@@ -68,7 +61,7 @@ export default function Listing() {
             ))}
           </ul>
         ) : (
-          returnNotFound()
+          <AddNew />
         )}
       </div>
     );

diff --git a/components/SearchListing.tsx b/components/SearchListing.tsx
@@ -1,19 +1,12 @@
 import { useState, useEffect } from "react";
 import CodeCard from "./CodeCard";
+import AddNew from "./AddNew";
 
 interface SearchListingProps {
   searchData: any;
 }
 
 export default function SearchListing({ searchData }: SearchListingProps) {
-  const returnNotFound = () => {
-    return (
-      <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>
@@ -29,7 +22,7 @@ export default function SearchListing({ searchData }: SearchListingProps) {
             ))}
           </ul>
         ) : (
-          returnNotFound()
+          <AddNew />
         )}
       </div>
     );

diff --git a/components/SecondarySearch.tsx b/components/SecondarySearch.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { placeholders } from "../utils";
 
 interface SecondarySearchProps {
@@ -8,6 +8,7 @@ interface SecondarySearchProps {
 
 export default function SecondarySearch({ onChange }: SecondarySearchProps) {
   const [placeholder, setPlaceholder] = useState(placeholders[0]);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -20,10 +21,15 @@ export default function SecondarySearch({ onChange }: SecondarySearchProps) {
     return () => clearTimeout(timer);
   }, [placeholder]);
 
+  useEffect(() => {
+    inputRef.current?.focus();
+  });
+
   return (
     <div>
       <div className="mt-12 flex">
         <input
+          ref={inputRef}
           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/components/index.ts b/components/index.ts
@@ -10,3 +10,7 @@ export { default as CodeCard } from "./CodeCard";
 export { default as PrimarySearch } from "./PrimarySearch";
 export { default as SearchListing } from "./SearchListing";
 export { default as SecondarySearch } from "./SecondarySearch";
+export { default as DemoSearch } from "./DemoSearch";
+
+//buttons
+export { default as AddNew } from "./AddNew";
diff --git a/content/content.json b/content/content.json
@@ -64,5 +64,11 @@
     "code": "git remote set-url repo-url",
     "technology": "git",
     "tags": ["git", "remote"]
+  },
+  {
+    "title": "Generate React Native release apk build",
+    "code": "cd android ./gradlew assembleRealease",
+    "technology": "reactnative",
+    "tags": ["reactnative", "apk", "build"]
   }
 ]
diff --git a/pages/details.tsx → pages/search.tsx b/pages/details.tsx → pages/search.tsx
@@ -11,6 +11,7 @@ export default function Details() {
     );
     setData(filtered);
   };
+
   return (
     <div>
       <Head>