33 lines
970 B
TypeScript
33 lines
970 B
TypeScript
import * as React from "react"
|
|
|
|
import { Typography } from "@/components/ui/typography"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type SectionHeadingProps = {
|
|
eyebrow: string
|
|
title: React.ReactNode
|
|
description?: React.ReactNode
|
|
align?: "left" | "center"
|
|
className?: string
|
|
/** 리드 문단 폭 제한 등 (예: "max-w-2xl") */
|
|
descriptionClassName?: string
|
|
}
|
|
|
|
function SectionHeading({ eyebrow, title, description, align = "left", className, descriptionClassName }: SectionHeadingProps) {
|
|
return (
|
|
<div className={cn(align === "center" && "text-center", className)}>
|
|
<Typography variant="eyebrow" className="mb-3 block">
|
|
{eyebrow}
|
|
</Typography>
|
|
<Typography variant="title">{title}</Typography>
|
|
{description && (
|
|
<Typography variant="lead" className={cn("mt-5", align === "center" && "mx-auto", descriptionClassName)}>
|
|
{description}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { SectionHeading }
|