48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import * as Tabs from "@radix-ui/react-tabs";
|
||
|
|
import { LayoutGrid, List, Table2 } from "lucide-react";
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { type ActiveViewType, useViewStore } from "@/lib/stores/view-store";
|
||
|
|
|
||
|
|
const tabs: { id: ActiveViewType; label: string; icon: typeof List }[] = [
|
||
|
|
{ id: "list", label: "List", icon: List },
|
||
|
|
{ id: "board", label: "Board", icon: LayoutGrid },
|
||
|
|
{ id: "table", label: "Table", icon: Table2 },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function ViewSwitcher() {
|
||
|
|
const activeView = useViewStore((s) => s.activeView);
|
||
|
|
const setActiveView = useViewStore((s) => s.setActiveView);
|
||
|
|
|
||
|
|
const tabValue = tabs.some((t) => t.id === activeView) ? activeView : "list";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Tabs.Root value={tabValue} onValueChange={(v) => setActiveView(v as ActiveViewType)}>
|
||
|
|
<Tabs.List
|
||
|
|
className="inline-flex h-8 items-stretch gap-1 border-b border-border"
|
||
|
|
aria-label="View type"
|
||
|
|
>
|
||
|
|
{tabs.map(({ id, label, icon: Icon }) => (
|
||
|
|
<Tabs.Trigger
|
||
|
|
key={id}
|
||
|
|
value={id}
|
||
|
|
className={cn(
|
||
|
|
"relative inline-flex items-center gap-1.5 px-2.5 text-xs font-medium text-muted-foreground transition-colors",
|
||
|
|
"hover:text-foreground",
|
||
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
||
|
|
"data-[state=active]:text-primary",
|
||
|
|
"after:pointer-events-none after:absolute after:bottom-0 after:left-1 after:right-1 after:h-0.5 after:rounded-full after:bg-primary after:opacity-0 after:transition-opacity",
|
||
|
|
"data-[state=active]:after:opacity-100",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon className="size-3.5 shrink-0" aria-hidden />
|
||
|
|
<span>{label}</span>
|
||
|
|
</Tabs.Trigger>
|
||
|
|
))}
|
||
|
|
</Tabs.List>
|
||
|
|
</Tabs.Root>
|
||
|
|
);
|
||
|
|
}
|