38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import type { InvitationEvent } from "@/types/invitation";
|
|
|
|
const icons = {
|
|
date: "📅",
|
|
time: "🕐",
|
|
venue: "📍",
|
|
};
|
|
|
|
export function EventDetails({ event }: { event: InvitationEvent }) {
|
|
const details = [
|
|
{ label: "Data", value: event.date, icon: icons.date },
|
|
{ label: "Horário", value: event.time, icon: icons.time },
|
|
{ label: "Local", value: event.venue, icon: icons.venue },
|
|
{ label: "Endereço", value: event.address, icon: icons.venue },
|
|
];
|
|
|
|
return (
|
|
<section className="space-y-4">
|
|
<h2 className="text-2xl font-bold text-amber-900 text-center mb-6">
|
|
Detalhes da Festa
|
|
</h2>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{details.map((detail) => (
|
|
<div
|
|
key={detail.label}
|
|
className="bg-white/60 backdrop-blur-sm rounded-xl p-5 border border-amber-100 text-center hover:border-amber-300 transition-colors group"
|
|
>
|
|
<span className="text-3xl block mb-2 group-hover:scale-110 transition-transform">{detail.icon}</span>
|
|
<dt className="text-sm font-medium text-amber-600 uppercase tracking-wide mb-1">
|
|
{detail.label}
|
|
</dt>
|
|
<dd className="text-amber-900 font-medium text-base">{detail.value}</dd>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |