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

components/leaderboard/leaderboard-tabs.tsx

@@ -3,13 +3,24 @@
 import { useRouter } from "next/navigation";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-export function LeaderboardTabs({ active }: { active: "xp" | "vc" }) {
+export function LeaderboardTabs({
+  active,
+  searchQuery,
+}: {
+  active: "xp" | "vc";
+  searchQuery: string;
+}) {
   const router = useRouter();
 
   return (
     <Tabs
       value={active}
-      onValueChange={(value) => router.push(`/leaderboard/${value}`)}
+      onValueChange={(value) => {
+        const params = new URLSearchParams();
+        if (searchQuery) params.set("q", searchQuery);
+        const query = params.toString();
+        router.push(query ? `/leaderboard/${value}?${query}` : `/leaderboard/${value}`);
+      }}
     >
       <TabsList className="w-full sm:w-fit" aria-label="เลือกประเภทลีดเดอร์บอร์ด">
         <TabsTrigger value="xp">อันดับ XP</TabsTrigger>