52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Reveal } from "./Reveal";
|
|
|
|
export function SectionHead({
|
|
tag,
|
|
title,
|
|
desc,
|
|
center = false,
|
|
headingId,
|
|
}: {
|
|
tag: string;
|
|
title: ReactNode;
|
|
desc?: string;
|
|
center?: boolean;
|
|
headingId?: string;
|
|
}) {
|
|
return (
|
|
<div className={center ? "text-center" : ""}>
|
|
<Reveal>
|
|
<div
|
|
className={`flex items-center gap-3 ${center ? "justify-center" : ""}`}
|
|
>
|
|
<span className="font-mono text-sm text-accent">{"//"}</span>
|
|
<span className="font-mono text-xs tracking-[0.25em] text-muted">
|
|
{tag}
|
|
</span>
|
|
<span className="h-px w-14 bg-line" />
|
|
</div>
|
|
</Reveal>
|
|
<Reveal delay={0.08}>
|
|
<h2
|
|
id={headingId}
|
|
className="mt-5 text-3xl font-black leading-[1.25] md:text-5xl md:leading-[1.2]"
|
|
>
|
|
{title}
|
|
</h2>
|
|
</Reveal>
|
|
{desc ? (
|
|
<Reveal delay={0.16}>
|
|
<p
|
|
className={`mt-5 max-w-xl leading-8 text-muted ${
|
|
center ? "mx-auto" : ""
|
|
}`}
|
|
>
|
|
{desc}
|
|
</p>
|
|
</Reveal>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|