39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { HeroBadge } from "@/components/layout/hero-badge";
|
|
import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle, type HeroTitleLineValue } from "@/components/layout/site-hero";
|
|
|
|
type PageHeroProps = {
|
|
badge?: string;
|
|
title: string;
|
|
description?: string;
|
|
lines?: HeroTitleLineValue[];
|
|
locale?: string;
|
|
};
|
|
|
|
function getDefaultLines(title: string): HeroTitleLineValue[] {
|
|
return title.split("\n").filter(Boolean).map((line, index) => ({
|
|
text: line,
|
|
tone: index === 0 ? "soft" : "accent",
|
|
align: "center",
|
|
}));
|
|
}
|
|
|
|
export function PageHero({ badge, title, description, lines, locale }: PageHeroProps) {
|
|
return (
|
|
<HeroShell compactBackdrop variant="page">
|
|
<HeroContentMotion variant="page">
|
|
<HeroMotionItem variant="page">
|
|
<HeroBadge>{badge ?? title}</HeroBadge>
|
|
</HeroMotionItem>
|
|
<HeroTitle lines={lines ?? getDefaultLines(title)} locale={locale} variant="page" />
|
|
{description ? (
|
|
<HeroMotionItem variant="page">
|
|
<p className="mx-auto mt-6 max-w-[34rem] text-base leading-7 text-foreground/72">
|
|
{description}
|
|
</p>
|
|
</HeroMotionItem>
|
|
) : null}
|
|
</HeroContentMotion>
|
|
</HeroShell>
|
|
);
|
|
}
|