finished implementing searchQuery to store, and added search bar input handleInput

src/app/_components/SearchBar.tsx

@@ -1,5 +1,23 @@
+"use client";
+import { ChangeEvent, ReactEventHandler, useState } from "react";
 import { Input } from "~/components/ui/input";
+import useFilterStore from "../store";
 
 export default function SearchBar() {
-  return <Input className="mx-auto max-w-xl focus-visible:ring-0" />;
+  const [searchQuery, setSearchQuery] = useState("");
+  const setStoreSearchQuery = useFilterStore((state) => state.setSearchQuery);
+
+  function handleInput(e: ChangeEvent<HTMLInputElement>) {
+    e.preventDefault();
+    const newValue = e.target.value;
+    setSearchQuery(newValue);
+    setStoreSearchQuery(newValue);
+  }
+  return (
+    <Input
+      value={searchQuery}
+      onInput={handleInput}
+      className="mx-auto max-w-xl focus-visible:ring-0"
+    />
+  );
 }

src/app/store.ts

@@ -29,6 +29,7 @@ interface WineType {
 }
 
 type FilterActions = {
+  setSearchQuery: (searchQuery: string) => void;
   addRegion: (region: string) => void;
   removeRegion: (region: string) => void;
   addCountry: (country: string) => void;
@@ -78,6 +79,12 @@ const useFilterStore = create<FilterState & FilterActions>()(
           other: false,
         },
       },
+      setSearchQuery: (searchQuery: string) =>
+        set(
+          produce((state: FilterState) => {
+              state.filters.searchQuery = searchQuery;
+          }),
+        ),
       addRegion: (region) =>
         set(
           produce((state: FilterState) => {