Hooked up search to state

Client/src/Components/Inputs/Search/index.jsx

@@ -3,25 +3,21 @@ import { Box, ListItem, Autocomplete, TextField } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import SearchIcon from "../../../assets/icons/search.svg?react";
 
-const options = [
-  "Google",
-  "Material UI",
-  "Alias",
-  "Twitter",
-  "Discord",
-  "YouTube",
-];
-
-const Search = ({ id, sx }) => {
+const Search = ({ id, options, value, handleChange, sx }) => {
   const theme = useTheme();
 
   return (
     <Autocomplete
       id={id}
+      inputValue={value}
+      onInputChange={(event, newValue) => {
+        handleChange(newValue);
+      }}
       fullWidth
       freeSolo
       disableClearable
       options={options}
+      getOptionLabel={(option) => option.name}
       renderInput={(params) => (
         <TextField
           {...params}
@@ -61,11 +57,11 @@ const Search = ({ id, sx }) => {
       )}
       filterOptions={(options, { inputValue }) => {
         const filtered = options.filter((option) =>
-          option.toLowerCase().includes(inputValue.toLowerCase())
+          option.name.toLowerCase().includes(inputValue.toLowerCase())
         );
 
         if (filtered.length === 0) {
-          return [{ label: "No monitors found", noOptions: true }];
+          return [{ name: "No monitors found", noOptions: true }];
         }
         return filtered;
       }}
@@ -84,7 +80,7 @@ const Search = ({ id, sx }) => {
                 : {}
             }
           >
-            {option.noOptions ? option.label : option}
+            {option.name}
           </ListItem>
         );
       }}

Client/src/Pages/Monitors/Home/index.jsx

@@ -1,5 +1,5 @@
 import "./index.css";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { getUptimeMonitorsByTeamId } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
@@ -19,6 +19,7 @@ const Monitors = ({ isAdmin }) => {
   const navigate = useNavigate();
   const monitorState = useSelector((state) => state.uptimeMonitors);
   const authState = useSelector((state) => state.auth);
+  const [search, setSearch] = useState("");
   const dispatch = useDispatch({});
 
   useEffect(() => {
@@ -28,7 +29,6 @@ const Monitors = ({ isAdmin }) => {
     monitorState?.isLoading &&
     monitorState?.monitorsSummary?.monitors?.length === 0;
 
-  console.log(monitorState.monitorsSummary.monitors);
   return (
     <Stack className="monitors" gap={theme.spacing(8)}>
       {loading ? (
@@ -118,7 +118,11 @@ const Monitors = ({ isAdmin }) => {
                     {monitorState?.monitorsSummary?.monitorCounts?.total || 0}
                   </Box>
                   <Box width="25%" minWidth={150} ml="auto">
-                    <Search />
+                    <Search
+                      options={monitorState?.monitorsSummary.monitors}
+                      value={search}
+                      handleChange={setSearch}
+                    />
                   </Box>
                 </Stack>
                 <MonitorTable isAdmin={isAdmin} />