You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { SearchIcon } from "lucide-react";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
type CariMasterProps = {
|
|
basePath: string;
|
|
placeholder?: string;
|
|
};
|
|
|
|
export function CariMaster({ basePath, placeholder }: CariMasterProps) {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [nilai, setNilai] = useState(searchParams.get("search") ?? "");
|
|
|
|
useEffect(() => {
|
|
const current = searchParams.get("search") ?? "";
|
|
if (nilai === current) return;
|
|
|
|
const timer = setTimeout(() => {
|
|
const url = nilai
|
|
? `${basePath}?search=${encodeURIComponent(nilai)}`
|
|
: basePath;
|
|
router.replace(url);
|
|
}, 300);
|
|
return () => clearTimeout(timer);
|
|
}, [nilai, searchParams, router, basePath]);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<SearchIcon className="absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
className="pl-8"
|
|
placeholder={placeholder}
|
|
value={nilai}
|
|
onChange={(e) => setNilai(e.target.value)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|