56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Field, FieldLabel } from "@/components/ui/field";
|
|
import type { DiscordVoiceChannel } from "@/lib/leaderboard/discord";
|
|
|
|
const ALL_CHANNELS = "all";
|
|
|
|
export function ChannelSelect({
|
|
channels,
|
|
selectedChannelId,
|
|
}: {
|
|
channels: DiscordVoiceChannel[];
|
|
selectedChannelId?: string;
|
|
}) {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<Field className="max-w-md">
|
|
<FieldLabel htmlFor="voice-channel">ห้องเสียง</FieldLabel>
|
|
<Select
|
|
value={selectedChannelId ?? ALL_CHANNELS}
|
|
onValueChange={(value) => {
|
|
const params = new URLSearchParams();
|
|
if (value !== ALL_CHANNELS) params.set("channel", value);
|
|
const query = params.toString();
|
|
router.push(query ? `/leaderboard/vc?${query}` : "/leaderboard/vc");
|
|
}}
|
|
>
|
|
<SelectTrigger id="voice-channel" className="w-full bg-card!">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value={ALL_CHANNELS}>ทุกห้องเสียงปัจจุบัน</SelectItem>
|
|
{channels.map((channel) => (
|
|
<SelectItem key={channel.id} value={channel.id}>
|
|
{channel.type === 13 ? "เวที: " : ""}
|
|
{channel.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
);
|
|
}
|