Add filter, pagination, search, and user table components

components/search.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRef, useTransition } from "react";
+import { Button } from "./ui/button";
+import { Loader } from "lucide-react";
+
+export default function Search({ disabled }: { disabled?: boolean }) {
+	const inputRef = useRef<HTMLInputElement>(null);
+	const { replace } = useRouter();
+
+	const pathname = usePathname();
+	const [isPending, startTransition] = useTransition();
+	const searchParams = useSearchParams();
+	const searchQuery = searchParams.get("query");
+
+	function handleSearch(term: string) {
+		const params = new URLSearchParams(searchParams.toString());
+
+		if (term) {
+			params.set("query", term);
+			params.set("page", "1");
+		} else {
+			params.delete("query");
+		}
+
+		startTransition(() => {
+			replace(`${pathname}?${params.toString()}`);
+		});
+	}
+
+	return (
+		<div className="flex gap-2 items-center justify-end">
+			<Input
+				ref={inputRef}
+				placeholder="Search..."
+				className={cn("bg-white")}
+				type="text"
+				name="search"
+				id="search"
+				defaultValue={searchQuery ? searchQuery : ""}
+				disabled={disabled}
+				spellCheck={false}
+				onChange={(e) => handleSearch(e.target.value)}
+			/>
+			<Button
+				disabled={isPending}
+				onClick={() => {
+					if (inputRef.current) {
+						inputRef.current.value = "";
+					}
+					replace(pathname);
+				}}
+			>
+				{isPending ? <Loader className="animate-spin" /> : "Reset"}
+			</Button>
+		</div>
+	);
+}