add search page

src/App.jsx

@@ -11,6 +11,7 @@ import SignIn from './components/SignIn/SignIn';
 import Submission from './components/Submission/Submission';
 import Account from './components/Account/Account';
 import { Container } from '@mui/material';
+import SearchPage from './components/SearchPage/SearchPage';
 
 const App = () => {
   // react hook to keep track of the user's authentication status
@@ -31,6 +32,7 @@ const App = () => {
             {/* logic to protect from seeing feed without logging in */}
             <Route path="/feed" element={user ? <Feed /> : <Navigate to="/" />} />
             <Route path="/submission" element={user ? <Submission userName={user}/> : <Navigate to="/" />} />
+            <Route path="/search" element={user ? <SearchPage /> : <Navigate to="/" />} />
             <Route path="/account" element={user ? <Account userName={user} userEmail={userEmail}/> : <Navigate to="/" />} />
           </Routes>
         </Router>

src/components/NavigationBar/NavigationBar.jsx

@@ -11,7 +11,7 @@ function NavigationBar() {
     return (
         <BottomNavigation className="nav-bar" showLabels>
         <BottomNavigationAction label="Feed" icon={<RestoreIcon />} component={Link} to="/feed" />
-        <BottomNavigationAction label="Friends" icon={<PersonSearchIcon />} component={Link} to="/searchfriends" />
+        <BottomNavigationAction label="Friends" icon={<PersonSearchIcon />} component={Link} to="/search" />
         <BottomNavigationAction label="Post" icon={<RateReviewIcon />} component={Link} to="/submission" />
         <BottomNavigationAction label="My Account" icon={<AccountCircleIcon />} component={Link} to="/account" />
         </BottomNavigation>

src/components/SearchPage/SearchPage.css

@@ -0,0 +1,3 @@
+.search-page {
+    height: 100vh;
+}

src/components/SearchPage/SearchPage.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import "./SearchPage.css";
+import AppBar from '../AppBar/AppBar';
+import NavigationBar from '../NavigationBar/NavigationBar';
+import { Container, Box, TextField, List, ListItem, ListItemText, Button } from '@mui/material';
+
+const friendsDb = ["Anna", "Andrew", "Angela", "Anthony", "Ben", "Bella", "Chris", "Catherine", "Diana"];
+
+function SearchPage() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+
+  const handleSearch = (event) => {
+    const value = event.target.value;
+    setQuery(value);
+
+    if (value.trim() === '') {
+      setResults([]);
+      return;
+    }
+
+    const filtered = friendsDb.filter(name => name.toLowerCase().includes(value.toLowerCase()))
+      .sort((a, b) => {
+        if (a.toLowerCase().startsWith(value.toLowerCase())) return -1;
+        if (b.toLowerCase().startsWith(value.toLowerCase())) return 1;
+        return 0;
+      });
+
+    setResults(filtered);
+  };
+
+  return (
+    <div>
+      <AppBar />
+      <Container className="search-page" maxWidth="sm">
+        <Box my={4}>
+          <TextField 
+            fullWidth 
+            label="Search friends" 
+            variant="outlined" 
+            value={query} 
+            onChange={handleSearch}
+          />
+          <List>
+            {results.map((name, index) => (
+              <ListItem key={index} button>
+                <ListItemText primary={name} />
+                <Button variant="outlined">Request</Button>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Container>
+      <NavigationBar />
+    </div>
+  );
+}
+
+export default SearchPage;