diff --git a/src/app/_components/SearchBar.tsx b/src/app/_components/SearchBar.tsx
index 815c8b3..7b26b91 100644
--- a/src/app/_components/SearchBar.tsx
+++ b/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 ;
+ const [searchQuery, setSearchQuery] = useState("");
+ const setStoreSearchQuery = useFilterStore((state) => state.setSearchQuery);
+
+ function handleInput(e: ChangeEvent) {
+ e.preventDefault();
+ const newValue = e.target.value;
+ setSearchQuery(newValue);
+ setStoreSearchQuery(newValue);
+ }
+ return (
+
+ );
}
diff --git a/src/app/store.ts b/src/app/store.ts
index 9fc1053..13d040d 100644
--- a/src/app/store.ts
+++ b/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()(
other: false,
},
},
+ setSearchQuery: (searchQuery: string) =>
+ set(
+ produce((state: FilterState) => {
+ state.filters.searchQuery = searchQuery;
+ }),
+ ),
addRegion: (region) =>
set(
produce((state: FilterState) => {