feat: implement real-time leaderboard system with XP and voice channel tracking features

2026-07-25 21:26:53 +07:00
parent bb6740fcee
commit 3f4b670170
18 changed files with 531 additions and 178 deletions
@@ -0,0 +1,69 @@
+"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>
+  );
+}