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] 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 />
     </>
   );
 };