53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { type ComponentProps } from 'react'
|
|
import { cn, interactive } from '@/lib'
|
|
|
|
export type ButtonVariant =
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'outline'
|
|
| 'ghost'
|
|
| 'destructive'
|
|
export type ButtonSize = 'sm' | 'md' | 'lg'
|
|
|
|
const base =
|
|
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium select-none ' +
|
|
interactive +
|
|
' focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
|
|
'disabled:pointer-events-none disabled:opacity-50'
|
|
|
|
const variantClass: Record<ButtonVariant, string> = {
|
|
primary: 'bg-primary text-primary-foreground',
|
|
secondary: 'bg-secondary text-secondary-foreground',
|
|
outline: 'border border-input bg-background',
|
|
// 투명 배경이라 brightness 무효 → bg 하이라이트
|
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
|
destructive: 'bg-destructive text-white',
|
|
}
|
|
|
|
const sizeClass: Record<ButtonSize, string> = {
|
|
sm: 'h-8 px-3 text-sm',
|
|
md: 'h-10 px-4 text-sm',
|
|
lg: 'h-11 px-6 text-base',
|
|
}
|
|
|
|
export interface ButtonProps extends ComponentProps<'button'> {
|
|
variant?: ButtonVariant
|
|
size?: ButtonSize
|
|
}
|
|
|
|
export function Button({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
type = 'button',
|
|
className,
|
|
...props
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={cn(base, variantClass[variant], sizeClass[size], className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|