70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|