84 lines
3.3 KiB
TypeScript
84 lines
3.3 KiB
TypeScript
import { Button } from "@/components/ui";
|
|
|
|
interface RsvpSelectorProps {
|
|
guests: { id: string; name: string; status: "pending" | "confirmed" | "declined" }[];
|
|
onSubmit: () => void;
|
|
submitting: boolean;
|
|
hasChanges: boolean;
|
|
deadline?: string;
|
|
closed?: boolean;
|
|
}
|
|
|
|
export function RsvpSelector({ guests, onSubmit, submitting, hasChanges, deadline, closed }: RsvpSelectorProps) {
|
|
const confirmedCount = guests.filter((g) => g.status === "confirmed").length;
|
|
const declinedCount = guests.filter((g) => g.status === "declined").length;
|
|
const pendingCount = guests.filter((g) => g.status === "pending").length;
|
|
|
|
const canSubmit = (confirmedCount + declinedCount) > 0;
|
|
|
|
return (
|
|
<section className="space-y-4 pt-4 border-t border-amber-200">
|
|
<h2 className="text-2xl font-bold text-amber-900 text-center">Confirmação de Presença</h2>
|
|
|
|
<div className="grid grid-cols-3 gap-3 text-center">
|
|
<div className="bg-emerald-50 rounded-xl p-4 border border-emerald-100">
|
|
<div className="text-3xl font-bold text-emerald-700">{confirmedCount}</div>
|
|
<div className="text-xs text-emerald-600 font-medium">Presentes</div>
|
|
</div>
|
|
<div className="bg-rose-50 rounded-xl p-4 border border-rose-100">
|
|
<div className="text-3xl font-bold text-rose-700">{declinedCount}</div>
|
|
<div className="text-xs text-rose-600 font-medium">Ausentes</div>
|
|
</div>
|
|
<div className="bg-amber-50 rounded-xl p-4 border border-amber-100">
|
|
<div className="text-3xl font-bold text-amber-700">{pendingCount}</div>
|
|
<div className="text-xs text-amber-600 font-medium">Pendentes</div>
|
|
</div>
|
|
</div>
|
|
|
|
{closed ? (
|
|
<p className="text-center text-rose-700 bg-rose-50 border border-rose-100 rounded-xl p-4 text-sm font-medium">
|
|
🔒 O prazo para confirmar presença terminou{deadline && ` em ${deadline}`}. O convite não aceita mais
|
|
alterações.
|
|
</p>
|
|
) : (
|
|
<>
|
|
{deadline && (
|
|
<p className="text-center text-amber-700 text-sm font-medium">⏰ Confirme até {deadline}</p>
|
|
)}
|
|
|
|
{!hasChanges && (
|
|
<p className="text-center text-amber-600 text-sm">
|
|
Selecione a presença dos convidados acima para ativar o botão
|
|
</p>
|
|
)}
|
|
|
|
<Button
|
|
onClick={onSubmit}
|
|
disabled={!canSubmit || submitting}
|
|
size="lg"
|
|
className="w-full"
|
|
variant="primary"
|
|
>
|
|
{submitting ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
Enviando...
|
|
</>
|
|
) : (
|
|
"Confirmar Presença"
|
|
)}
|
|
</Button>
|
|
|
|
{canSubmit && !submitting && (
|
|
<p className="text-center text-xs text-amber-500">
|
|
Você pode alterar as seleções antes de enviar
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
} |