From dfdfb4f8b5d3a1afd77d8411e87db01667ff564c Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 10 May 2024 19:53:18 -0700
Subject: [PATCH 1/2] Implemented the search feature.

---
 Client/src/Components/Search/index.css |  0
 Client/src/Components/Search/index.jsx | 41 ++++++++++++++++++++++++++
 Client/src/Pages/Home/index.jsx        |  2 ++
 3 files changed, 43 insertions(+)
 create mode 100644 Client/src/Components/Search/index.css
 create mode 100644 Client/src/Components/Search/index.jsx

diff --git a/Client/src/Components/Search/index.css b/Client/src/Components/Search/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Search/index.jsx b/Client/src/Components/Search/index.jsx
new file mode 100644
index 000000000..770db3309
--- /dev/null
+++ b/Client/src/Components/Search/index.jsx
@@ -0,0 +1,41 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Chip from '@mui/material/Chip';
+import Box from '@mui/material/Box';
+
+const teamMembers = [
+  { title: 'John Doe'},
+  { title: 'Jane Smith'},
+  { title: 'Alex Johnson'},
+];
+
+export default function Search() {
+  return (
+    <Box padding={10}> {/* Add padding to the container */}
+      <Autocomplete
+        multiple
+        id="tags-outlined"
+        options={teamMembers}
+        getOptionLabel={(option) => option.title}
+        filterSelectedOptions
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label="Team Members"
+            placeholder="Favorites"
+          />
+        )}
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip
+              key={index}
+              variant="outlined"
+              label={option.title}
+              {...getTagProps({ index })}
+            />
+          ))
+        }
+      />
+    </Box>
+  );
+}
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 28d7d6ac4..8742da6f1 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -1,4 +1,5 @@
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
+import Search from "../../Components/Search";
 import "./index.css";
 
 const Home = () => {
@@ -6,6 +7,7 @@ const Home = () => {
     <>
       <div>Home</div>
       <DropdownTeamMember />
+      <Search />
     </>
   );
 };

From 145ff8e7161049b18b5856148fb26c9a7168300c Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sat, 11 May 2024 11:03:38 -0700
Subject: [PATCH 2/2] Addressed the comments.

---
 Client/src/Components/Search/index.jsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Search/index.jsx b/Client/src/Components/Search/index.jsx
index 770db3309..391b95c02 100644
--- a/Client/src/Components/Search/index.jsx
+++ b/Client/src/Components/Search/index.jsx
@@ -2,6 +2,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Chip from '@mui/material/Chip';
 import Box from '@mui/material/Box';
+import { useTheme } from "@mui/material";
 
 const teamMembers = [
   { title: 'John Doe'},
@@ -9,9 +10,16 @@ const teamMembers = [
   { title: 'Alex Johnson'},
 ];
 
-export default function Search() {
+/**
+ * @component
+ * @returns {JSX.Element}
+ */
+
+export default function Search()
+ {
+  const theme = useTheme();
   return (
-    <Box padding={10}> {/* Add padding to the container */}
+    <Box padding={theme.spacing(2)}> {/* Add padding to the container */}
       <Autocomplete
         multiple
         id="tags-outlined"
@@ -26,12 +34,12 @@ export default function Search() {
           />
         )}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
+          value.map((option) => (
             <Chip
-              key={index}
+              key={option.title}
               variant="outlined"
               label={option.title}
-              {...getTagProps({ index })}
+              {...getTagProps({ option })}
             />
           ))
         }