42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
// CTA 버튼 토큰. 랜딩의 CTA 는 전부 앵커 스크롤이라 href 를 주면 <a> 로 렌더한다
|
|
// (SSG 특성상 하이드레이션 전에도 동작).
|
|
const buttonVariants = cva(
|
|
"inline-flex items-center justify-center gap-2 transition-all cursor-pointer disabled:opacity-50",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
primary: "bg-primary hover:bg-primary-deep text-white",
|
|
secondary: "bg-fill hover:bg-fill-hover text-ink-soft hover:text-ink",
|
|
// 밝은 배경 위 반투명 보조 버튼 (글라스 히어로)
|
|
glass: "bg-white/70 hover:bg-white text-ink-soft hover:text-ink border border-white shadow-sm",
|
|
},
|
|
// radius 는 사이즈 무관 rounded-2xl(16px) 로 통일 — 알약형 금지
|
|
size: {
|
|
pill: "px-4.5 py-2.5 text-sm font-semibold rounded-2xl",
|
|
md: "px-6 py-2.5 text-xs font-bold rounded-2xl",
|
|
lg: "px-8 py-4.5 text-base font-bold rounded-2xl",
|
|
xl: "px-10 py-5 text-base font-bold rounded-2xl",
|
|
},
|
|
},
|
|
defaultVariants: { variant: "primary", size: "lg" },
|
|
},
|
|
)
|
|
|
|
type ButtonProps = VariantProps<typeof buttonVariants> &
|
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
href?: string
|
|
}
|
|
|
|
function Button({ className, variant, size, href, ...props }: ButtonProps) {
|
|
const Comp: React.ElementType = href ? "a" : "button"
|
|
return <Comp href={href} className={cn(buttonVariants({ variant, size }), className)} {...props} />
|
|
}
|
|
|
|
export { Button, buttonVariants }
|