46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import { CalendarDays, List } from "lucide-react";
|
|
|
|
export type CalendarView = "month" | "list";
|
|
|
|
interface CalendarViewSwitcherProps {
|
|
currentView: CalendarView;
|
|
onViewChange: (view: CalendarView) => void;
|
|
}
|
|
|
|
const views: { value: CalendarView; label: string; icon: typeof CalendarDays }[] = [
|
|
{ value: "month", label: "Month", icon: CalendarDays },
|
|
{ value: "list", label: "List", icon: List },
|
|
];
|
|
|
|
export function CalendarViewSwitcher({
|
|
currentView,
|
|
onViewChange,
|
|
}: CalendarViewSwitcherProps) {
|
|
return (
|
|
<div className="flex items-center gap-1 bg-muted p-1 rounded-lg">
|
|
{views.map((view) => {
|
|
const Icon = view.icon;
|
|
return (
|
|
<Button
|
|
key={view.value}
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onViewChange(view.value)}
|
|
className={cn(
|
|
"gap-2",
|
|
currentView === view.value && "bg-background shadow-sm"
|
|
)}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
<span className="hidden sm:inline">{view.label}</span>
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|