62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type SectionTitleProps = {
|
|
label?: string;
|
|
title?: React.ReactNode;
|
|
text?: React.ReactNode;
|
|
align?: "left" | "center";
|
|
children?: React.ReactNode;
|
|
titleWidth?: number;
|
|
contentWidth?: number;
|
|
className?: string;
|
|
};
|
|
|
|
export function SectionTitle({
|
|
label,
|
|
title,
|
|
text,
|
|
align = "left",
|
|
children,
|
|
titleWidth,
|
|
contentWidth,
|
|
className,
|
|
}: SectionTitleProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col items-center",
|
|
{
|
|
"xl:items-start": align === "left",
|
|
},
|
|
className,
|
|
)}
|
|
>
|
|
<p
|
|
className={cn("font-mono text-sm md:text-md text-white/50 text-center", {
|
|
"xl:text-left": align === "left",
|
|
})}
|
|
>
|
|
{label}
|
|
</p>
|
|
<h1
|
|
className={cn(
|
|
"text-[28px] sm:pb-3 sm:text-[52px] sm:leading-[64px] text-white md:max-w-[463px] pt-4 font-medium section-title-heading-gradient text-center",
|
|
{ "xl:text-left": align === "left" },
|
|
)}
|
|
style={{ maxWidth: titleWidth ? `${titleWidth}px` : "none" }}
|
|
>
|
|
{title}
|
|
</h1>
|
|
<p
|
|
className={cn("text-sm md:text-base text-white leading-7 py-[26px] text-center", {
|
|
"xl:text-left": align === "left",
|
|
})}
|
|
style={{ maxWidth: contentWidth ? `${contentWidth}px` : "none" }}
|
|
>
|
|
{text}
|
|
</p>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|