one-day-update-vna

src/components/customs/custom-search.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+
+interface PropsSearch {
+  placeholder?: string;
+  keyword?: string;
+  setKeyword: (value: string) => void;
+}
+
+export default function Search({
+  keyword = "",
+  setKeyword,
+  placeholder = "Nhập từ khóa tìm kiếm",
+}: PropsSearch) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchTerm, setSearchTerm] = useState(keyword);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setKeyword(searchTerm.trim());
+    }, 600);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  return (
+    <div
+      onClick={() => inputRef.current?.focus()}
+      className={clsx(
+        "flex h-12 cursor-text items-center gap-2 rounded-full border bg-white px-4 transition-colors",
+        "border-[#e1e5ed] hover:border-[#3772ff] focus-within:border-[#3772ff]",
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="size-6 text-[#908F99]"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+        />
+      </svg>
+
+      <input
+        ref={inputRef}
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        placeholder={placeholder}
+        className={clsx(
+          "flex-1",
+          "border-none",
+          "bg-transparent",
+          "p-2",
+          "text-[16px]",
+          "font-medium",
+          "outline-none",
+          "placeholder:text-[#777e90]",
+        )}
+      />
+    </div>
+  );
+}