diff --git a/src/ss_frontend/Routes/Route.jsx b/src/ss_frontend/Routes/Route.jsx
index 3b6dd3d..a91b9f6 100644
--- 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: ,
},
-];
\ No newline at end of file
+ {
+ name: "Search",
+ path: "/search",
+ element: ,
+ },
+];
diff --git a/src/ss_frontend/src/components/Navbar.jsx b/src/ss_frontend/src/components/Navbar.jsx
index ac0b939..cde3093 100644
--- 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 (
-
+
-
Sunshine - Socialfi
+
SocialFi
-
-
-
+
+
+
+
+
+
-
People
+ {/*
People
*/}
-
+
-
Discover
+ {/*
Discover
*/}
-
+
-
About Us
+ {/*
About Us
*/}
-
-
-
-
+
{
}}
/>
About Sunshine
-
+
Socialfi Crowdfunding with DAO system and NLP AI integration
diff --git a/src/ss_frontend/src/pages/SearchPage.jsx b/src/ss_frontend/src/pages/SearchPage.jsx
new file mode 100644
index 0000000..8b7e34c
--- /dev/null
+++ 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 (
+
+ {searchQuery}
+
+ );
+}