54 lines
1.5 KiB
TypeScript
54 lines
1.5 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) => {
|
|
const words = line.trim().split(/\s+/).filter(Boolean);
|
|
|
|
if (words.length <= 1) {
|
|
return {
|
|
text: line,
|
|
tone: "soft",
|
|
align: "center",
|
|
};
|
|
}
|
|
|
|
return {
|
|
text: line,
|
|
align: "center",
|
|
segments: words.map((word, index) => ({
|
|
text: index === words.length - 1 ? word : `${word} `,
|
|
tone: index % 2 === 0 ? "soft" : "accent",
|
|
})),
|
|
};
|
|
});
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|