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