diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8848185bd..08e57c655 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -6,6 +6,7 @@ import HomePage from './pages/homePage';
import FlowerDictionary from './pages/flowerDictionary';
import ScanAFlower from './pages/scanAFlower';
import FlowerGallery from './pages/flowerGallery';
+import DiscoverPage from './pages/discoverPage';
import IndividualFlowerPage from './pages/individualFlowerPage';
import NavBar from './components/NavBar';
import Footer from './components/Footer';
@@ -23,6 +24,7 @@ const App = () => {
let element = useRoutes([
{ path: '/', element: },
{ path: '/about', element: },
+ { path: '/discover', element: },
{ path: '/dictionary', element: },
{ path: '/scan', element: },
{ path: '/gallery', element: },
diff --git a/client/src/components/NavBar.css b/client/src/components/NavBar.css
index a2b1aacff..8297be5f7 100644
--- a/client/src/components/NavBar.css
+++ b/client/src/components/NavBar.css
@@ -48,3 +48,36 @@
border-bottom-color: #2a7abf;
font-weight: 500;
}
+
+.navbar-search {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.navbar-search input {
+ font-family: Avenir, "Century Gothic", sans-serif;
+ font-size: 0.875rem;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ border-radius: 20px;
+ outline: none;
+ background: rgba(255, 255, 255, 0.7);
+ color: #373D3F;
+ width: 160px;
+ transition: border-color 0.2s, width 0.2s;
+}
+
+.navbar-search input:focus {
+ border-color: #2a7abf;
+ width: 200px;
+}
+
+.navbar-search button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 1rem;
+ padding: 4px;
+ line-height: 1;
+}
diff --git a/client/src/components/NavBar.jsx b/client/src/components/NavBar.jsx
index f2e969279..a4c3a4815 100644
--- a/client/src/components/NavBar.jsx
+++ b/client/src/components/NavBar.jsx
@@ -1,20 +1,41 @@
-import { NavLink } from 'react-router';
+import { NavLink, useNavigate } from 'react-router';
+import { useState } from 'react';
import './NavBar.css';
const NavBar = () => {
+ const [query, setQuery] = useState('');
+ const navigate = useNavigate();
+
+ const handleSearch = (e) => {
+ e.preventDefault();
+ if (query.trim()) {
+ navigate(`/discover?search=${encodeURIComponent(query.trim())}`);
+ setQuery('');
+ }
+ };
+
return (
);
};
diff --git a/client/src/pages/discoverPage.jsx b/client/src/pages/discoverPage.jsx
new file mode 100644
index 000000000..e3287af91
--- /dev/null
+++ b/client/src/pages/discoverPage.jsx
@@ -0,0 +1,5 @@
+const DiscoverPage = () => {
+ return
Discover Flowers
;
+};
+
+export default DiscoverPage;
diff --git a/client/src/pages/flowerPage.jsx b/client/src/pages/flowerPage.jsx
deleted file mode 100644
index e69de29bb..000000000