From 1154e0287f42f8b289fc21870faa085eb1be380f Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Tue, 5 Aug 2025 19:50:48 +0200
Subject: [PATCH] Add SearchInput component for debounced text input with
 customizable placeholder and change handler

---
 src/components/atoms/SearchInput/index.tsx | 36 ++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/atoms/SearchInput/index.tsx

diff --git a/src/components/atoms/SearchInput/index.tsx b/src/components/atoms/SearchInput/index.tsx
new file mode 100644
index 0000000..9d1b996
--- /dev/null
+++ b/src/components/atoms/SearchInput/index.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { FC, useEffect, useState } from "react";
+
+type Props = {
+  defaultValue?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  debounce?: number;
+};
+
+export const SearchInput: FC<Props> = ({
+  defaultValue = "",
+  placeholder = "Search",
+  onChange,
+  debounce = 500,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onChange?.(value ?? "");
+    }, debounce);
+
+    return () => clearTimeout(timer);
+  }, [value]);
+
+  return (
+    <input
+      type="text"
+      placeholder={placeholder}
+      className="w-full p-2 rounded-md border border-gray-600 "
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};