feat: navbar

TheoJustin · Aug 23, 2024 · e48db4f · e48db4f
1 parent 73f44d8
commit e48db4f
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 22 deletions.
diff --git a/src/ss_frontend/Routes/Route.jsx b/src/ss_frontend/Routes/Route.jsx
@@ -3,6 +3,7 @@ import HomePage from "../src/pages/HomePage";
 import PeoplePage from "../src/pages/PeoplePage";
 import ProfileForm from "../src/pages/ProfileForm/ProfileForm";
 import ProfilePage from "../src/pages/ProfilePage";
+import SearchPage from "../src/pages/SearchPage";
 
 export const RoutesList = [
   {
@@ -30,4 +31,9 @@ export const RoutesList = [
     path: "/people",
     element: <PeoplePage />,
   },
-];
+  {
+    name: "Search",
+    path: "/search",
+    element: <SearchPage />,
+  },
+];
diff --git a/src/ss_frontend/src/components/Navbar.jsx b/src/ss_frontend/src/components/Navbar.jsx
@@ -1,41 +1,81 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import logo from "../assets/ss_logo.png";
 import { AiOutlineUser } from "react-icons/ai";
 import { AiFillAliwangwang } from "react-icons/ai";
 import { AiOutlineTeam } from "react-icons/ai";
 import { AiTwotoneAppstore } from "react-icons/ai";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const Navbar = () => {
+  const searchRef = useRef();
+  const navigate = useNavigate();
+  const [searchKey, setSearchKey] = useState("");
+
+  useEffect(() => {
+    const handleSearchBind = (e) => {
+      if (e.ctrlKey && e.key === "k") {
+        e.preventDefault();
+        searchRef.current.focus();
+      }
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        console.log(searchKey);
+        navigate(`/search?query=${searchKey}`);
+      }
+    };
+
+    document.addEventListener("keydown", handleSearchBind);
+
+    return () => {
+      document.removeEventListener("keydown", handleSearchBind);
+    };
+  }, [searchKey, navigate]);
+
   return (
     <div className="navbar fixed bg-white z-20">
-      <Link to={'/'} className="flex-1 flex-row ml-8">
+      <Link to={"/"} className="flex-1 flex-row ml-8">
         <img src={logo} alt="sunshine logo" className="w-16 h-16" />
-        <a className="btn btn-ghost text-xl">Sunshine - Socialfi</a>
+        <a className="btn btn-ghost text-xl">SocialFi</a>
       </Link>
-      <div className="flex gap-4">
-        <div className="flex mr-8 gap-8">
-          <Link to={'/people'} className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all">
+      <div className="flex gap-4 mr-8">
+        <div className="flex gap-8">
+          <div className="form-control">
+            <label className="input input-bordered flex items-center gap-2 w-96">
+              <input
+                ref={searchRef}
+                type="text"
+                className="grow"
+                placeholder="Search"
+                value={searchKey}
+                onChange={(e) => setSearchKey(e.target.value)}
+              />
+              <kbd className="kbd kbd-sm">ctrl</kbd>
+              <kbd className="kbd kbd-sm">K</kbd>
+            </label>
+          </div>
+          <Link
+            to={"/people"}
+            className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all"
+          >
             <AiOutlineTeam className="text-3xl" />
-            <p className="text-sm">People</p>
+            {/* <p className="text-sm">People</p> */}
           </Link>
-          <Link to={'/'} className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all">
+          <Link
+            to={"/"}
+            className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all"
+          >
             <AiTwotoneAppstore className="text-3xl" />
-            <p className="text-sm">Discover</p>
+            {/* <p className="text-sm">Discover</p> */}
           </Link>
-          <Link to={'/about'} className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all">
+          <Link
+            to={"/about"}
+            className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all"
+          >
             <AiFillAliwangwang className="text-3xl" />
-            <p className="text-sm">About Us</p>
+            {/* <p className="text-sm">About Us</p> */}
           </Link>
         </div>
-        <div className="form-control">
-          <input
-            type="text"
-            placeholder="Search"
-            className="input input-bordered w-24 md:w-auto"
-          />
-        </div>
-        <div className="dropdown dropdown-end mr-8">
+        <div className="dropdown dropdown-end">
           <div
             tabIndex={0}
             role="button"

diff --git a/src/ss_frontend/src/pages/AboutPage.jsx b/src/ss_frontend/src/pages/AboutPage.jsx
@@ -25,7 +25,7 @@ const AboutPage = () => {
             }}
           />
           <p className="font-bold text-4xl z-10 mt-10">About Sunshine</p>
-          <p className="mt-4 font-semibold text-lg z-10">
+          <p className="mt-4 font-semibold text-xl z-10">
             Socialfi Crowdfunding with DAO system and NLP AI integration
           </p>
         </div>

diff --git a/src/ss_frontend/src/pages/SearchPage.jsx b/src/ss_frontend/src/pages/SearchPage.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import MainTemplate from "../templates/MainTemplate";
+
+export default function SearchPage() {
+  const { search } = useLocation();
+  const searchQuery = new URLSearchParams(search).get("query");
+
+  return (
+    <MainTemplate>
+      <div>{searchQuery}</div>
+    </MainTemplate>
+  );
+}