70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Search, X } from "lucide-react";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Field, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
export function LeaderboardSearch({ query }: { query: string }) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
|
|
function navigate(nextValue: string) {
|
|
const params = new URLSearchParams(searchParams);
|
|
const trimmed = nextValue.trim();
|
|
|
|
params.delete("page");
|
|
if (trimmed) {
|
|
params.set("q", trimmed);
|
|
} else {
|
|
params.delete("q");
|
|
}
|
|
|
|
const nextQuery = params.toString();
|
|
router.push(nextQuery ? `${pathname}?${nextQuery}` : pathname);
|
|
}
|
|
|
|
return (
|
|
<form
|
|
className="flex w-full flex-col gap-2 sm:max-w-md"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.currentTarget);
|
|
navigate(String(formData.get("q") ?? ""));
|
|
}}
|
|
>
|
|
<Field>
|
|
<FieldLabel htmlFor="leaderboard-search">ค้นหาสมาชิก</FieldLabel>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="leaderboard-search"
|
|
name="q"
|
|
key={query}
|
|
defaultValue={query}
|
|
placeholder="ชื่อ, username หรือ Discord ID"
|
|
autoComplete="off"
|
|
className="bg-card!"
|
|
/>
|
|
{query && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => navigate("")}
|
|
>
|
|
<X data-icon="inline-start" />
|
|
<span className="sr-only">ล้างการค้นหา</span>
|
|
</Button>
|
|
)}
|
|
<Button type="submit" variant="secondary" size="icon">
|
|
<Search data-icon="inline-start" />
|
|
<span className="sr-only">ค้นหา</span>
|
|
</Button>
|
|
</div>
|
|
</Field>
|
|
</form>
|
|
);
|
|
}
|