53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { AlertTriangle } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import { de } from "date-fns/locale";
|
|
import type { RsvpEventDto } from "@/lib/rsvp";
|
|
import { RsvpDialog } from "@/components/rsvp-form";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
|
|
export function RsvpActionCard({ events }: { events: RsvpEventDto[] }) {
|
|
if (events.length === 0) return null;
|
|
return (
|
|
<Card className="mb-5 border-[var(--warn)] bg-[var(--warn-soft)]">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-lg">
|
|
<AlertTriangle className="h-5 w-5 text-[var(--warn)]" />
|
|
Rückmeldung erforderlich
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Für diese Termine fehlt noch eine Antwort eurer Familie.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3">
|
|
{events.map((event) => (
|
|
<div
|
|
key={event.id}
|
|
className="flex flex-col gap-3 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] p-4 sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<div>
|
|
<p className="font-medium">{event.title}</p>
|
|
<p className="mt-1 text-sm text-[var(--ink-soft)]">
|
|
Rückmeldung bis{" "}
|
|
{format(
|
|
new Date(event.rsvpDeadline ?? event.startDate),
|
|
"dd.MM.yyyy HH:mm",
|
|
{ locale: de },
|
|
)}
|
|
</p>
|
|
</div>
|
|
<RsvpDialog event={event} />
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|