UMBRA/frontend/src/components/dashboard/CountdownWidget.tsx
Kyle Pope ca8b654471 Dashboard Phase 2: weather widget, starred events, quick add, thinner events
- Add weather router with OpenWeatherMap integration and 1-hour cache
- Add is_starred column to calendar events with countdown widget
- Add weather_city setting with Settings page input
- Replace people/locations stats with open todos count + weather card
- Add quick-add dropdown (event/todo/reminder) to dashboard header
- Make CalendarWidget events single-line thin rows
- Add rain warnings to smart briefing when chance > 40%
- Invalidate dashboard/upcoming queries on form mutations
- Migration 004: is_starred + weather_city columns

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 13:15:43 +08:00

33 lines
1010 B
TypeScript

import { differenceInCalendarDays } from 'date-fns';
import { Star } from 'lucide-react';
interface CountdownWidgetProps {
event: {
id: number;
title: string;
start_datetime: string;
};
}
export default function CountdownWidget({ event }: CountdownWidgetProps) {
const daysUntil = differenceInCalendarDays(new Date(event.start_datetime), new Date());
if (daysUntil < 0) return null;
const label = daysUntil === 0
? 'Today'
: daysUntil === 1
? '1 day'
: `${daysUntil} days`;
return (
<div className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg bg-amber-500/[0.07] border border-amber-500/10">
<Star className="h-3.5 w-3.5 text-amber-400 fill-amber-400 shrink-0" />
<span className="text-sm text-amber-200/90 truncate">
<span className="font-semibold tabular-nums">{label}</span>
{daysUntil > 0 ? ' until ' : ' — '}
<span className="font-medium text-foreground">{event.title}</span>
</span>
</div>
);
}