44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { GoogleIcon } from "./GoogleIcon";
|
|
import { useCalendar } from "./CalendarContext";
|
|
import { CalendarDays, Loader2 } from "lucide-react";
|
|
|
|
export function CalendarAuth() {
|
|
const { login, isLoading } = useCalendar();
|
|
|
|
return (
|
|
<Card className="w-full max-w-md mx-auto">
|
|
<CardHeader className="text-center">
|
|
<div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
|
<CalendarDays className="w-8 h-8 text-primary" />
|
|
</div>
|
|
<CardTitle className="text-2xl">Connect Your Calendar</CardTitle>
|
|
<CardDescription>
|
|
Link your Google Calendar to view upcoming events and stay organized
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
onClick={() => login()}
|
|
disabled={isLoading}
|
|
className="w-full gap-2"
|
|
size="lg"
|
|
>
|
|
{isLoading ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<GoogleIcon className="w-4 h-4" />
|
|
)}
|
|
{isLoading ? "Connecting..." : "Sign in with Google"}
|
|
</Button>
|
|
<p className="text-xs text-muted-foreground text-center mt-4">
|
|
We only request read-only access to your calendar. Your data is stored locally on your device.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|