Files
wedding-website/components/invite/section-heading.tsx
T

29 lines
786 B
TypeScript

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>
)
}