50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { LayoutList, Rows3 } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useBoardView, type BoardView } from "@/components/board/board-view-provider";
|
|
|
|
// New views just need one more entry here (and one more BoardView literal)
|
|
// -- no redesign of the trigger or menu required.
|
|
const OPTIONS: { value: BoardView; label: string; icon: typeof LayoutList }[] = [
|
|
{ value: "default", label: "Default", icon: LayoutList },
|
|
{ value: "compact", label: "Compact", icon: Rows3 },
|
|
];
|
|
|
|
export function ViewSwitcher() {
|
|
const { view, setView } = useBoardView();
|
|
const current = OPTIONS.find((o) => o.value === view) ?? OPTIONS[0];
|
|
const Icon = current.icon;
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={
|
|
<Button variant="ghost" size="sm" className="gap-2 text-muted-foreground" aria-label={`Board view: ${current.label}`}>
|
|
<Icon className="size-4" />
|
|
<span className="hidden md:inline">{current.label}</span>
|
|
</Button>
|
|
}
|
|
/>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuRadioGroup value={view} onValueChange={(v) => setView(v as BoardView)}>
|
|
{OPTIONS.map((option) => (
|
|
<DropdownMenuRadioItem key={option.value} value={option.value}>
|
|
<option.icon className="size-4" />
|
|
{option.label}
|
|
</DropdownMenuRadioItem>
|
|
))}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|