50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const sectionBg = {
|
|
white: "bg-white",
|
|
surface: "bg-surface",
|
|
dark: "bg-ink text-white",
|
|
}
|
|
|
|
const sectionWidth = {
|
|
sm: "max-w-3xl",
|
|
md: "max-w-4xl",
|
|
lg: "max-w-5xl",
|
|
}
|
|
|
|
type SectionProps = React.HTMLAttributes<HTMLElement> & {
|
|
bg?: keyof typeof sectionBg
|
|
/** 내부 컨테이너 최대폭 */
|
|
width?: keyof typeof sectionWidth
|
|
/** 상단 구분선. 하단까지 필요하면 className 에 border-b border-line 추가 */
|
|
bordered?: boolean
|
|
/** 컨테이너 밖(섹션 전체 기준)에 까는 장식 요소 — 배경 블롭 등 */
|
|
decor?: React.ReactNode
|
|
containerClassName?: string
|
|
}
|
|
|
|
function Section({
|
|
bg = "white",
|
|
width = "md",
|
|
bordered = false,
|
|
decor,
|
|
className,
|
|
containerClassName,
|
|
children,
|
|
...props
|
|
}: SectionProps) {
|
|
return (
|
|
<section
|
|
className={cn("py-36 md:py-44", sectionBg[bg], bordered && "border-t border-line", decor && "relative overflow-hidden", className)}
|
|
{...props}
|
|
>
|
|
{decor}
|
|
<div className={cn("mx-auto px-6", sectionWidth[width], decor && "relative z-10", containerClassName)}>{children}</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export { Section }
|