34 lines
1.9 KiB
TypeScript
34 lines
1.9 KiB
TypeScript
import Link from "next/link"
|
|
|
|
import { RsvpForm } from "@/components/invite/rsvp-form"
|
|
import { WeddingContainer } from "@/components/invite/wedding-container"
|
|
import type { InvitationDetail } from "@/lib/db/queries/invitations"
|
|
import type { ToastRequest } from "@/lib/db/types"
|
|
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
|
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
|
|
|
export function RsvpSection(props: {
|
|
action: (formData: FormData) => void | Promise<void>
|
|
detail: InvitationDetail
|
|
token: string
|
|
dictionary: GuestDictionary
|
|
content: InvitePageContent["rsvp"]
|
|
closed: boolean
|
|
toastRequest: ToastRequest | undefined
|
|
filename: string | null
|
|
submitted?: string
|
|
error?: string
|
|
}) {
|
|
const message = props.submitted ? props.dictionary.form.submitted : props.error === "closed" ? props.dictionary.errors.closed : props.error ? props.dictionary.errors.generic : null
|
|
return (
|
|
<section id="rsvp" className="bg-wedding-ivory pt-wedding-section">
|
|
<WeddingContainer wide>
|
|
<div className="grid gap-14">
|
|
<div><p className="wedding-section-label">{props.content.eyebrow}</p><h2 className="wedding-display-heading mt-5 text-wedding-page">{props.content.heading}</h2><div className="mt-7 w-12 border-t-2 border-wedding-terracotta" /><p className="mt-7 font-wedding-ui text-wedding-body leading-wedding-body">{props.content.paragraph} <strong>{props.content.deadline}</strong>.</p><p className="mt-4 font-wedding-display text-wedding-medium italic text-wedding-terracotta">{props.content.helper}</p><Link className="mt-12 inline-block wedding-text-link" href="#faq">{props.content.faqLink} →</Link></div>
|
|
<div>{message ? <p aria-live="polite" className="border border-wedding-line bg-wedding-cream p-5 font-wedding-ui text-sm">{message}</p> : null}<RsvpForm {...props} /></div>
|
|
</div>
|
|
</WeddingContainer>
|
|
</section>
|
|
)
|
|
}
|