feat: initial draft and components creation
This commit is contained in:
Raul Lugo
@@ -0,0 +1,30 @@
|
||||
import Image from "next/image"
|
||||
|
||||
import { SectionHeading } from "@/components/invite/section-heading"
|
||||
import { WeddingContainer } from "@/components/invite/wedding-container"
|
||||
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
||||
|
||||
const expectationImages = ["/images/details_ceremony.png", "/images/details_dinner.png"]
|
||||
|
||||
export function DetailsSection({ content }: { content: InvitePageContent["details"] }) {
|
||||
return (
|
||||
<section id="details" className="bg-wedding-ivory">
|
||||
<WeddingContainer className="py-wedding-section">
|
||||
<div className="grid gap-10 wedding-layout:grid-cols-2 wedding-layout:items-center">
|
||||
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
|
||||
<div className="relative aspect-video overflow-hidden"><Image src="/images/details_main.png" alt="Luttelforster Muhle venue" fill className="object-cover" sizes="(min-width: 900px) 55vw, 90vw" /></div>
|
||||
</div>
|
||||
<div className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-phone:grid-cols-3 wedding-phone:divide-x wedding-phone:divide-y-0 wedding-phone:border-y-0">
|
||||
{content.facts.map((fact, index) => <article className="py-7 wedding-phone:px-6 wedding-phone:py-0" key={fact.label}><p className="wedding-section-label">0{index + 1} · {fact.label}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{fact.value}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{fact.description}</p></article>)}
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 wedding-phone:grid-cols-2">
|
||||
{content.expectations.map((item, index) => <article key={item.label}><div className="relative aspect-video overflow-hidden"><Image src={expectationImages[index]} alt={item.label} fill className="object-cover" sizes="(min-width: 600px) 45vw, 90vw" /></div><h3 className="mt-5 font-wedding-display text-wedding-medium">{item.label}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{item.value}</p><p className="mt-1 font-wedding-ui text-sm">{item.description}</p></article>)}
|
||||
</div>
|
||||
<div className="mt-16 bg-wedding-cream p-8 wedding-phone:p-12"><p className="wedding-section-label">{content.dressCode.label}</p><h3 className="mt-4 font-wedding-display text-wedding-section">{content.dressCode.value}</h3><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{content.dressCode.description}</p></div>
|
||||
<div className="mt-16 grid gap-8 wedding-phone:grid-cols-2 wedding-layout:grid-cols-5">
|
||||
{content.policies.map((policy) => <article className="border-l border-wedding-line pl-5" key={policy.title}><h3 className="font-wedding-display text-wedding-medium">{policy.title}</h3><p className="mt-3 font-wedding-ui text-sm leading-wedding-body">{policy.description}</p></article>)}
|
||||
</div>
|
||||
</WeddingContainer>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import Link from "next/link"
|
||||
|
||||
import { SectionHeading } from "@/components/invite/section-heading"
|
||||
import { WeddingContainer } from "@/components/invite/wedding-container"
|
||||
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
||||
|
||||
export function FaqSection({ content }: { content: InvitePageContent["faq"] }) {
|
||||
return (
|
||||
<section id="faq" className="bg-wedding-ivory py-wedding-section">
|
||||
<WeddingContainer>
|
||||
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
|
||||
<div className="mt-14 grid gap-x-12 wedding-layout:grid-cols-2">
|
||||
{content.questions.map((item) => <details className="group border-b border-wedding-line py-6" key={item.question}><summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-wedding-display text-wedding-medium"><span>{item.question}</span><span className="font-wedding-ui text-wedding-label text-wedding-terracotta transition-transform group-open:rotate-45">+</span></summary><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{item.answer}</p></details>)}
|
||||
</div>
|
||||
<aside className="mt-16 flex flex-col gap-5 bg-wedding-cream p-8 wedding-phone:flex-row wedding-phone:items-center wedding-phone:justify-between wedding-phone:p-12">
|
||||
<div><h3 className="font-wedding-display text-wedding-medium">{content.contact.heading}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{content.contact.description}</p></div>
|
||||
<Link className="wedding-text-link" href="mailto:hello@example.com">{content.contact.action} →</Link>
|
||||
</aside>
|
||||
</WeddingContainer>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import Image from "next/image"
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
export function FeatureSplit({
|
||||
children,
|
||||
image,
|
||||
alt,
|
||||
reverse = false,
|
||||
}: {
|
||||
children: ReactNode
|
||||
image: string
|
||||
alt: string
|
||||
reverse?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className="grid wedding-layout:grid-cols-2">
|
||||
<div
|
||||
className={`flex items-center bg-wedding-ivory px-wedding-gutter-mobile py-wedding-section wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop ${reverse ? "wedding-layout:order-2" : ""}`}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-md">{children}</div>
|
||||
</div>
|
||||
<div className={`relative min-h-96 ${reverse ? "wedding-layout:order-1" : ""}`}>
|
||||
<Image className="object-cover" src={image} alt={alt} fill sizes="(min-width: 900px) 60vw, 100vw" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export function HeartQuote({ quote }: { quote: string }) {
|
||||
return (
|
||||
<blockquote className="bg-wedding-cream px-wedding-gutter-mobile py-12 text-center wedding-phone:px-wedding-gutter-phone">
|
||||
<p className="font-wedding-display text-wedding-medium italic leading-wedding-display text-wedding-terracotta">
|
||||
“{quote}”
|
||||
</p>
|
||||
<div className="mx-auto mt-8 flex max-w-xs items-center gap-4 text-wedding-terracotta">
|
||||
<span className="h-px flex-1 bg-wedding-line" />
|
||||
<span aria-hidden="true">♥</span>
|
||||
<span className="h-px flex-1 bg-wedding-line" />
|
||||
</div>
|
||||
</blockquote>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
import { SiteHeader } from "@/components/invite/site-header"
|
||||
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
||||
|
||||
export function HeroSection({ content }: { content: InvitePageContent["hero"] }) {
|
||||
return (
|
||||
<section id="top" className="relative isolate flex min-h-screen items-end overflow-hidden bg-wedding-ink text-wedding-white">
|
||||
<Image className="object-cover wedding-layout:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
||||
<Image className="hidden object-cover wedding-layout:block" src="/images/hero_desktop.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-wedding-ink/75 via-wedding-ink/30 to-transparent" />
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-wedding-ink/65 to-transparent" />
|
||||
<SiteHeader />
|
||||
<div className="relative z-10 w-full px-wedding-gutter-mobile pb-16 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop wedding-layout:pb-24">
|
||||
<p className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label">{content.eyebrow}</p>
|
||||
<h1 className="wedding-display-heading mt-6 max-w-5xl text-wedding-hero leading-none text-wedding-white">
|
||||
{content.title}
|
||||
</h1>
|
||||
<p className="mt-5 font-wedding-display text-wedding-medium italic">{content.subtitle}</p>
|
||||
<Link className="mt-14 inline-flex flex-col items-center gap-2 font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label" href="#introduction">
|
||||
Scroll <span aria-hidden="true">↓</span>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import Image from "next/image"
|
||||
import { CalendarDays, Clock3, MapPin } from "lucide-react"
|
||||
|
||||
import { Monogram } from "@/components/invite/monogram"
|
||||
import { WeddingContainer } from "@/components/invite/wedding-container"
|
||||
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
||||
|
||||
const icons = [CalendarDays, MapPin, Clock3]
|
||||
|
||||
export function IntroductionSection({ content }: { content: InvitePageContent["introduction"] }) {
|
||||
return (
|
||||
<section id="introduction" className="bg-wedding-ivory py-wedding-section">
|
||||
<WeddingContainer>
|
||||
<Monogram />
|
||||
<div className="mt-10 grid gap-10 wedding-layout:grid-cols-2 wedding-layout:items-center">
|
||||
<div>
|
||||
<h2 className="wedding-display-heading text-wedding-page text-wedding-ink">{content.heading}</h2>
|
||||
<div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
|
||||
{content.paragraphs.map((paragraph) => <p className="mt-6 font-wedding-ui text-wedding-body leading-wedding-body" key={paragraph}>{paragraph}</p>)}
|
||||
<p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
|
||||
</div>
|
||||
<div className="relative mx-auto min-h-96 w-full max-w-md shadow-lg">
|
||||
<Image src="/images/schedule.png" alt="A candlelit wedding reception" fill className="object-cover" sizes="(min-width: 900px) 40vw, 90vw" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-14 grid border-y border-wedding-line wedding-phone:grid-cols-3 wedding-phone:border-y-0">
|
||||
{content.facts.map((fact, index) => {
|
||||
const Icon = icons[index]
|
||||
return <div className={`flex gap-4 px-0 py-7 wedding-phone:px-6 wedding-phone:py-0 ${index < content.facts.length - 1 ? "wedding-phone:border-r wedding-phone:border-wedding-line" : ""}`} key={fact.label}>
|
||||
<Icon className="mt-1 size-5 text-wedding-terracotta" aria-hidden="true" />
|
||||
<div><p className="wedding-section-label">{fact.label}</p><p className="mt-2 font-wedding-display text-wedding-medium">{fact.value}</p>{fact.description ? <p className="mt-1 font-wedding-ui text-sm">{fact.description}</p> : null}</div>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
</WeddingContainer>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function Monogram({ light = false, className }: { light?: boolean; className?: string }) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"font-wedding-display text-3xl tracking-tight",
|
||||
light ? "text-wedding-white" : "text-wedding-terracotta",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
N <span className="px-1 font-wedding-ui text-xs">|</span> R
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -99,40 +99,43 @@ export function PhotoUpload({
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="rounded-[2rem] border bg-white p-6 shadow-sm md:p-8">
|
||||
<div className="border-b pb-6">
|
||||
<h2 className="text-2xl font-semibold">{labels.title}</h2>
|
||||
<p className="mt-2 text-stone-600">{labels.description}</p>
|
||||
<p className="mt-2 text-sm text-stone-500">{labels.requirements}</p>
|
||||
<section className="border-t border-wedding-line pt-10">
|
||||
<div className="grid gap-4 wedding-layout:grid-cols-3">
|
||||
<p className="wedding-section-label">04</p>
|
||||
<div>
|
||||
<h2 className="font-wedding-display text-wedding-medium">{labels.title}</h2>
|
||||
<p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{labels.description}</p>
|
||||
</div>
|
||||
<p className="font-wedding-ui text-sm">{labels.requirements}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="mt-6 wedding-layout:ml-60">
|
||||
{filename ? (
|
||||
<p className="rounded-2xl bg-stone-100 px-4 py-3 text-sm text-stone-700">
|
||||
<p className="bg-wedding-cream px-4 py-3 font-wedding-ui text-sm text-wedding-ink">
|
||||
{labels.current.replace("{filename}", filename)}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{disabled ? (
|
||||
<p className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
|
||||
<p className="border border-wedding-line bg-wedding-cream px-4 py-3 font-wedding-ui text-sm">
|
||||
{labels.disabled}
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<label className="flex-1 space-y-2">
|
||||
<span className="text-sm font-medium">{labels.choose}</span>
|
||||
<div className="mt-4 flex flex-col gap-4 wedding-phone:flex-row wedding-phone:items-end">
|
||||
<label className="flex-1 font-wedding-ui text-sm">
|
||||
<span>{labels.choose}</span>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept={allowedImageContentTypes.join(",")}
|
||||
className="w-full rounded-xl border bg-white px-3 py-2"
|
||||
className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={uploadSelectedFile}
|
||||
disabled={status === "uploading"}
|
||||
className="rounded-full bg-stone-950 px-6 py-3 font-medium text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-60 sm:self-end"
|
||||
className="wedding-primary-cta disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{status === "uploading"
|
||||
? labels.uploading
|
||||
@@ -144,9 +147,9 @@ export function PhotoUpload({
|
||||
)}
|
||||
|
||||
{status === "success" ? (
|
||||
<p className="text-sm text-emerald-700">{labels.success}</p>
|
||||
<p className="mt-4 font-wedding-ui text-sm text-wedding-olive">{labels.success}</p>
|
||||
) : null}
|
||||
{status === "error" ? <p className="text-sm text-red-700">{labels.error}</p> : null}
|
||||
{status === "error" ? <p className="mt-4 font-wedding-ui text-sm text-wedding-terracotta">{labels.error}</p> : null}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { InvitationDetail } from "@/lib/db/queries/invitations"
|
||||
import type { ToastRequest } from "@/lib/db/types"
|
||||
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
||||
|
||||
import { PhotoUpload } from "@/components/invite/photo-upload"
|
||||
import { RsvpGuestFields } from "@/components/invite/rsvp-guest-fields"
|
||||
import { RsvpToastFields } from "@/components/invite/rsvp-toast-fields"
|
||||
import { RsvpTravelFields } from "@/components/invite/rsvp-travel-fields"
|
||||
|
||||
export function RsvpForm({
|
||||
action,
|
||||
detail,
|
||||
token,
|
||||
dictionary,
|
||||
closed,
|
||||
toastRequest,
|
||||
filename,
|
||||
}: {
|
||||
action: (formData: FormData) => void | Promise<void>
|
||||
detail: InvitationDetail
|
||||
token: string
|
||||
dictionary: GuestDictionary
|
||||
closed: boolean
|
||||
toastRequest: ToastRequest | undefined
|
||||
filename: string | null
|
||||
}) {
|
||||
return (
|
||||
<form action={action} className="mt-12">
|
||||
<RsvpGuestFields members={detail.members} dictionary={dictionary} disabled={closed} />
|
||||
<RsvpTravelFields response={detail.response} dictionary={dictionary} disabled={closed} />
|
||||
<RsvpToastFields members={detail.members} toastRequest={toastRequest} dictionary={dictionary} disabled={closed} />
|
||||
<div className="py-10"><PhotoUpload token={token} labels={dictionary.upload} disabled={closed} existingFilename={filename} /></div>
|
||||
{!closed ? <button type="submit" className="wedding-primary-cta w-full">{dictionary.form.submit} →</button> : null}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { InvitationMember } from "@/lib/db/types"
|
||||
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
||||
import type { MealPreference } from "@/lib/validation/response"
|
||||
|
||||
const mealOptions: MealPreference[] = ["meat", "fish", "vegetarian", "vegan", "kids", "other"]
|
||||
|
||||
export function RsvpGuestFields({
|
||||
members,
|
||||
dictionary,
|
||||
disabled,
|
||||
}: {
|
||||
members: InvitationMember[]
|
||||
dictionary: GuestDictionary
|
||||
disabled: boolean
|
||||
}) {
|
||||
return (
|
||||
<section className="border-t border-wedding-line pt-10">
|
||||
{members.map((member, index) => (
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled} key={member.id}>
|
||||
<legend className="sr-only">{member.name}</legend>
|
||||
<p className="wedding-section-label">0{index + 1}</p>
|
||||
<div><h3 className="font-wedding-display text-wedding-medium">{member.name}</h3><p className="mt-2 font-wedding-ui text-sm">{dictionary.form.attending}</p></div>
|
||||
<div className="grid gap-6 wedding-phone:grid-cols-2">
|
||||
<div className="flex gap-3"><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="yes" defaultChecked={member.attending === true} required />{dictionary.form.yes}</label><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="no" defaultChecked={member.attending === false} required />{dictionary.form.no}</label></div>
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.form.mealPreference}</span><select name={`meal-${member.id}`} defaultValue={member.meal_preference ?? ""} className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"><option value="">{dictionary.form.mealPlaceholder}</option>{mealOptions.map((meal) => <option key={meal} value={meal}>{dictionary.meals[meal]}</option>)}</select></label>
|
||||
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.dietaryRestrictions}</span><input name={`dietary-${member.id}`} defaultValue={member.dietary_restrictions ?? ""} placeholder={dictionary.form.noRestrictions} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
))}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
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 py-wedding-section">
|
||||
<WeddingContainer wide>
|
||||
<div className="grid gap-14 wedding-layout:grid-cols-2">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
import type { InvitationMember, ToastRequest } from "@/lib/db/types"
|
||||
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
||||
|
||||
export function RsvpToastFields({
|
||||
members,
|
||||
toastRequest,
|
||||
dictionary,
|
||||
disabled,
|
||||
}: {
|
||||
members: InvitationMember[]
|
||||
toastRequest: ToastRequest | undefined
|
||||
dictionary: GuestDictionary
|
||||
disabled: boolean
|
||||
}) {
|
||||
const [enabled, setEnabled] = useState(Boolean(toastRequest))
|
||||
|
||||
return (
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled}>
|
||||
<legend className="sr-only">{dictionary.interactions.toastTitle}</legend>
|
||||
<p className="wedding-section-label">03</p>
|
||||
<div><h3 className="font-wedding-display text-wedding-medium">{dictionary.interactions.toastTitle}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{dictionary.interactions.toastDescription}</p></div>
|
||||
<div>
|
||||
<label className="flex items-center gap-3 font-wedding-ui text-sm"><input type="checkbox" name="wantsToast" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />{dictionary.interactions.wantsToast}</label>
|
||||
<div className="mt-6 grid gap-6 wedding-phone:grid-cols-2">
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.interactions.speakerName}</span><input name="toastSpeakerName" disabled={!enabled} defaultValue={toastRequest?.speaker_name ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.interactions.estimatedMinutes}</span><input name="toastEstimatedMinutes" type="number" min="1" disabled={!enabled} defaultValue={toastRequest?.estimated_minutes ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
|
||||
</div>
|
||||
<select name="toastMemberId" defaultValue={toastRequest?.member_id ?? ""} className="sr-only"><option value="" />{members.map((member) => <option key={member.id} value={member.id}>{member.name}</option>)}</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { InvitationResponse } from "@/lib/db/types"
|
||||
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
||||
|
||||
function dateValue(value: Date | string | null | undefined) {
|
||||
return value instanceof Date ? value.toISOString().slice(0, 10) : value ?? ""
|
||||
}
|
||||
|
||||
export function RsvpTravelFields({
|
||||
response,
|
||||
dictionary,
|
||||
disabled,
|
||||
}: {
|
||||
response: InvitationResponse | null
|
||||
dictionary: GuestDictionary
|
||||
disabled: boolean
|
||||
}) {
|
||||
return (
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled}>
|
||||
<legend className="sr-only">{dictionary.sections.travel}</legend>
|
||||
<p className="wedding-section-label">02</p>
|
||||
<div><h3 className="font-wedding-display text-wedding-medium">{dictionary.sections.travel}</h3></div>
|
||||
<div className="grid gap-6 wedding-phone:grid-cols-2">
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.form.arrivalDate}</span><input type="date" name="arrivalDate" defaultValue={dateValue(response?.arrival_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.form.departureDate}</span><input type="date" name="departureDate" defaultValue={dateValue(response?.departure_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.stayLocation}</span><input name="stayLocation" defaultValue={response?.stay_location ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<div className="wedding-phone:col-span-2"><p className="font-wedding-ui text-sm">{dictionary.form.needsTransportHelp}</p><div className="mt-3 flex gap-6 font-wedding-ui text-sm"><label><input type="radio" name="needsTransportHelp" value="yes" defaultChecked={response?.needs_transport_help === true} /> {dictionary.form.yes}</label><label><input type="radio" name="needsTransportHelp" value="no" defaultChecked={response?.needs_transport_help === false} /> {dictionary.form.no}</label></div></div>
|
||||
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.messageToCouple}</span><textarea name="messageToCouple" defaultValue={response?.message_to_couple ?? ""} rows={4} className="mt-2 w-full border border-wedding-line bg-transparent p-3" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { FeatureSplit } from "@/components/invite/feature-split"
|
||||
import { HeartQuote } from "@/components/invite/heart-quote"
|
||||
import { SectionHeading } from "@/components/invite/section-heading"
|
||||
import { WeddingContainer } from "@/components/invite/wedding-container"
|
||||
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
||||
|
||||
export function ScheduleSection({ content }: { content: InvitePageContent["schedule"] }) {
|
||||
return (
|
||||
<section id="schedule" className="bg-wedding-ivory">
|
||||
<FeatureSplit image="/images/schedule.png" alt="Wedding dinner celebration" reverse>
|
||||
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
|
||||
<p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
|
||||
</FeatureSplit>
|
||||
<WeddingContainer className="py-wedding-section">
|
||||
<p className="wedding-section-label">{content.label}</p>
|
||||
<div className="mt-10 grid gap-8 wedding-phone:grid-cols-2 wedding-layout:grid-cols-6">
|
||||
{content.timeline.map((item) => <article className="border-l border-wedding-line pl-5 wedding-layout:border-l-0 wedding-layout:border-t wedding-layout:pt-6 wedding-layout:pl-0" key={item.time}><span className="-ml-7 block size-3 rounded-full bg-wedding-terracotta wedding-layout:-mt-8 wedding-layout:ml-0" /><p className="mt-4 wedding-section-label">{item.time}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{item.title}</h3><p className="mt-4 font-wedding-ui text-sm leading-wedding-body">{item.description}</p></article>)}
|
||||
</div>
|
||||
</WeddingContainer>
|
||||
<HeartQuote quote={content.quote} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
export function SectionHeading({
|
||||
eyebrow,
|
||||
heading,
|
||||
description,
|
||||
align = "left",
|
||||
}: {
|
||||
eyebrow: string
|
||||
heading: string
|
||||
description?: string
|
||||
align?: "left" | "center"
|
||||
}) {
|
||||
const alignment = align === "center" ? "items-center text-center" : "items-start"
|
||||
|
||||
return (
|
||||
<div className={`flex max-w-2xl flex-col ${alignment}`}>
|
||||
<p className="wedding-section-label">{eyebrow}</p>
|
||||
<h2 className="wedding-display-heading mt-5 text-wedding-section text-wedding-ink">
|
||||
{heading}
|
||||
</h2>
|
||||
<div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
|
||||
{description ? (
|
||||
<p className="mt-7 font-wedding-ui text-wedding-body leading-wedding-body text-wedding-ink">
|
||||
{description}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import Link from "next/link"
|
||||
|
||||
import { Monogram } from "@/components/invite/monogram"
|
||||
|
||||
const links = [
|
||||
["Introduction", "#introduction"],
|
||||
["Our story", "#story"],
|
||||
["Details", "#details"],
|
||||
["Schedule", "#schedule"],
|
||||
["FAQ", "#faq"],
|
||||
["RSVP", "#rsvp"],
|
||||
] as const
|
||||
|
||||
export function SiteHeader() {
|
||||
return (
|
||||
<header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="#top" aria-label="Back to top">
|
||||
<Monogram light />
|
||||
</Link>
|
||||
<nav aria-label="Invitation sections" className="hidden wedding-layout:block">
|
||||
<ul className="flex items-center gap-6">
|
||||
{links.map(([label, href]) => (
|
||||
<li key={href}>
|
||||
<Link className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white" href={href}>
|
||||
{label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<details className="group relative wedding-layout:hidden">
|
||||
<summary className="cursor-pointer list-none font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white">
|
||||
Menu <span aria-hidden="true">☰</span>
|
||||
</summary>
|
||||
<nav aria-label="Invitation sections" className="absolute right-0 top-8 w-48 bg-wedding-ivory p-5 shadow-lg">
|
||||
<ul className="space-y-4">
|
||||
{links.map(([label, href]) => (
|
||||
<li key={href}>
|
||||
<Link className="wedding-text-link" href={href}>{label}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</details>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import Image from "next/image"
|
||||
|
||||
import { FeatureSplit } from "@/components/invite/feature-split"
|
||||
import { HeartQuote } from "@/components/invite/heart-quote"
|
||||
import { SectionHeading } from "@/components/invite/section-heading"
|
||||
import { WeddingContainer } from "@/components/invite/wedding-container"
|
||||
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
||||
|
||||
const journeyImages = [
|
||||
"/images/story_journey_1.png",
|
||||
"/images/story_journey_2.png",
|
||||
"/images/story_journey_3.png",
|
||||
]
|
||||
|
||||
export function StorySection({ content }: { content: InvitePageContent["story"] }) {
|
||||
return (
|
||||
<section id="story" className="bg-wedding-ivory">
|
||||
<FeatureSplit image="/images/our_story.png" alt="Nicole, Raul and their dog in the countryside">
|
||||
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} />
|
||||
{content.paragraphs.map((paragraph) => (
|
||||
<p className="mt-6 font-wedding-ui text-wedding-body leading-wedding-body text-wedding-ink" key={paragraph}>{paragraph}</p>
|
||||
))}
|
||||
<p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
|
||||
</FeatureSplit>
|
||||
<WeddingContainer className="py-wedding-section">
|
||||
<p className="wedding-section-label">Our journey</p>
|
||||
<div className="mt-12 grid gap-10 wedding-layout:grid-cols-3">
|
||||
{content.timeline.map((item, index) => (
|
||||
<article className="border-l border-wedding-line pl-6 wedding-layout:border-l-0 wedding-layout:pl-0" key={item.year}>
|
||||
<div className="mb-5 flex items-center gap-4 wedding-layout:flex-col wedding-layout:items-start">
|
||||
<span className="size-3 rounded-full bg-wedding-terracotta" />
|
||||
<p className="wedding-section-label">{item.year}</p>
|
||||
</div>
|
||||
<div className="relative aspect-square overflow-hidden">
|
||||
<Image src={journeyImages[index]} alt={item.title} fill className="object-cover" sizes="(min-width: 900px) 30vw, 85vw" />
|
||||
</div>
|
||||
<h3 className="mt-5 font-wedding-display text-wedding-medium text-wedding-ink">{item.title}</h3>
|
||||
{item.place ? <p className="mt-1 wedding-section-label">{item.place}</p> : null}
|
||||
<p className="mt-4 font-wedding-ui text-sm leading-wedding-body text-wedding-ink">{item.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</WeddingContainer>
|
||||
<HeartQuote quote={content.quote} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function WeddingContainer({
|
||||
children,
|
||||
wide = false,
|
||||
className,
|
||||
}: {
|
||||
children: ReactNode
|
||||
wide?: boolean
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"mx-auto w-full px-wedding-gutter-mobile wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop",
|
||||
wide ? "max-w-wedding-content" : "max-w-6xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { DetailsSection } from "@/components/invite/details-section"
|
||||
import { FaqSection } from "@/components/invite/faq-section"
|
||||
import { HeroSection } from "@/components/invite/hero-section"
|
||||
import { IntroductionSection } from "@/components/invite/introduction-section"
|
||||
import { RsvpSection } from "@/components/invite/rsvp-section"
|
||||
import { ScheduleSection } from "@/components/invite/schedule-section"
|
||||
import { StorySection } from "@/components/invite/story-section"
|
||||
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 WeddingInvite({
|
||||
action,
|
||||
detail,
|
||||
token,
|
||||
dictionary,
|
||||
content,
|
||||
closed,
|
||||
toastRequest,
|
||||
filename,
|
||||
submitted,
|
||||
error,
|
||||
}: {
|
||||
action: (formData: FormData) => void | Promise<void>
|
||||
detail: InvitationDetail
|
||||
token: string
|
||||
dictionary: GuestDictionary
|
||||
content: InvitePageContent
|
||||
closed: boolean
|
||||
toastRequest: ToastRequest | undefined
|
||||
filename: string | null
|
||||
submitted?: string
|
||||
error?: string
|
||||
}) {
|
||||
return (
|
||||
<main className="overflow-x-hidden bg-wedding-ivory text-wedding-ink">
|
||||
<HeroSection content={content.hero} />
|
||||
<IntroductionSection content={content.introduction} />
|
||||
<StorySection content={content.story} />
|
||||
<DetailsSection content={content.details} />
|
||||
<ScheduleSection content={content.schedule} />
|
||||
<FaqSection content={content.faq} />
|
||||
<RsvpSection action={action} detail={detail} token={token} dictionary={dictionary} content={content.rsvp} closed={closed} toastRequest={toastRequest} filename={filename} submitted={submitted} error={error} />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user