91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { useCalendar } from "./CalendarContext";
|
|
import { CheckSquare, Square, Calendar } from "lucide-react";
|
|
|
|
export function CalendarSelector() {
|
|
const {
|
|
calendars,
|
|
selectedCalendars,
|
|
toggleCalendar,
|
|
selectAllCalendars,
|
|
deselectAllCalendars,
|
|
} = useCalendar();
|
|
|
|
if (calendars.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const allSelected = selectedCalendars.length === calendars.length;
|
|
const someSelected = selectedCalendars.length > 0 && !allSelected;
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Calendar className="w-4 h-4" />
|
|
Calendars
|
|
</CardTitle>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={selectAllCalendars}
|
|
className="h-7 text-xs"
|
|
disabled={allSelected}
|
|
>
|
|
<CheckSquare className="w-3 h-3 mr-1" />
|
|
All
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={deselectAllCalendars}
|
|
className="h-7 text-xs"
|
|
disabled={selectedCalendars.length === 0}
|
|
>
|
|
<Square className="w-3 h-3 mr-1" />
|
|
None
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<ScrollArea className="h-[200px] pr-4">
|
|
<div className="space-y-2">
|
|
{calendars.map((calendar) => (
|
|
<label
|
|
key={calendar.id}
|
|
className="flex items-center gap-3 p-2 rounded-lg hover:bg-accent cursor-pointer transition-colors"
|
|
>
|
|
<Checkbox
|
|
checked={selectedCalendars.includes(calendar.id)}
|
|
onCheckedChange={() => toggleCalendar(calendar.id)}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">
|
|
{calendar.summary}
|
|
{calendar.primary && (
|
|
<span className="ml-2 text-xs text-muted-foreground">
|
|
(Primary)
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
<p className="text-xs text-muted-foreground mt-3">
|
|
{selectedCalendars.length} of {calendars.length} selected
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|