Kyle Pope
bdae07fb7d
- UpcomingWidget: single-line rows with icon/title/date/type/priority - CalendarWidget: whitespace-nowrap time ranges, no wrapping - TodoWidget: compact dot + title + date + badge on one line - Active Reminders: single-line with dot indicator - CountdownWidget: supports array of starred events - StatsWidget: shows city name in weather card - Dashboard API: returns starred_events array (up to 5) instead of single Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { format } from 'date-fns';
|
||
import { Calendar } from 'lucide-react';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
||
interface DashboardEvent {
|
||
id: number;
|
||
title: string;
|
||
start_datetime: string;
|
||
end_datetime: string;
|
||
all_day: boolean;
|
||
color?: string;
|
||
is_starred?: boolean;
|
||
}
|
||
|
||
interface CalendarWidgetProps {
|
||
events: DashboardEvent[];
|
||
}
|
||
|
||
export default function CalendarWidget({ events }: CalendarWidgetProps) {
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<div className="p-1.5 rounded-md bg-purple-500/10">
|
||
<Calendar className="h-4 w-4 text-purple-400" />
|
||
</div>
|
||
Today's Events
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{events.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground text-center py-6">
|
||
No events today
|
||
</p>
|
||
) : (
|
||
<div className="space-y-0.5">
|
||
{events.map((event) => (
|
||
<div
|
||
key={event.id}
|
||
className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-elevated transition-colors duration-150"
|
||
>
|
||
<div
|
||
className="w-1.5 h-1.5 rounded-full shrink-0"
|
||
style={{ backgroundColor: event.color || 'hsl(var(--primary))' }}
|
||
/>
|
||
<span className="text-[11px] text-muted-foreground shrink-0 whitespace-nowrap tabular-nums">
|
||
{event.all_day
|
||
? 'All day'
|
||
: `${format(new Date(event.start_datetime), 'h:mm a')} – ${format(new Date(event.end_datetime), 'h:mm a')}`}
|
||
</span>
|
||
<span className="text-sm font-medium truncate">{event.title}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|