button.tsx

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3
4interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
5	variant?: 'default' | 'ghost'
6	size?: 'default' | 'sm' | 'lg'
7}
8
9export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
10	({ className, variant = 'default', size = 'default', ...props }, ref) => {
11		return (
12			<button
13				className={cn(
14					'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 disabled:pointer-events-none disabled:opacity-50',
15					{
16						'bg-gray-800 text-white hover:bg-gray-700': variant === 'default',
17						'hover:bg-gray-800/50': variant === 'ghost',
18						'h-10 px-4 py-2': size === 'default',
19						'h-8 px-3': size === 'sm',
20						'h-12 px-8': size === 'lg',
21					},
22					className,
23				)}
24				ref={ref}
25				{...props}
26			/>
27		)
28	},
29)
30
31Button.displayName = 'Button'
32