80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { useCalendar } from "./CalendarContext";
|
|
import {
|
|
RefreshCw,
|
|
LogOut,
|
|
CheckCircle2,
|
|
AlertCircle,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
|
|
export function CalendarControls() {
|
|
const {
|
|
isLoading,
|
|
lastSynced,
|
|
refreshEvents,
|
|
logout,
|
|
error,
|
|
events,
|
|
} = useCalendar();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between gap-4 flex-wrap">
|
|
<div className="flex items-center gap-2">
|
|
{isLoading ? (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
<span>Syncing...</span>
|
|
</div>
|
|
) : error ? (
|
|
<div className="flex items-center gap-2 text-sm text-destructive">
|
|
<AlertCircle className="w-4 h-4" />
|
|
<span>{error}</span>
|
|
</div>
|
|
) : lastSynced ? (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
|
<span>
|
|
Synced {formatDistanceToNow(lastSynced, { addSuffix: true })}
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
• {events.length} events
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<span>Not synced yet</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => refreshEvents()}
|
|
disabled={isLoading}
|
|
className="gap-2"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`} />
|
|
Refresh
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={logout}
|
|
className="gap-2 text-muted-foreground"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
Sign Out
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|