47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import * as React from "react"
|
|
// Simple className utility
|
|
function cn(...classes: (string | undefined | null | boolean)[]): string {
|
|
return classes.filter(Boolean).join(' ')
|
|
}
|
|
|
|
// Button variants
|
|
const buttonVariants = {
|
|
variant: {
|
|
default: "bg-[#8D6B1D] text-white hover:bg-[#7A5E1A]",
|
|
destructive: "bg-red-500 text-white hover:bg-red-600",
|
|
outline: "border border-gray-300 bg-white hover:bg-gray-50 hover:text-gray-900",
|
|
secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
|
|
ghost: "hover:bg-gray-100 hover:text-gray-900",
|
|
link: "text-[#8D6B1D] underline-offset-4 hover:underline",
|
|
},
|
|
size: {
|
|
default: "h-10 px-4 py-2",
|
|
sm: "h-9 rounded-md px-3",
|
|
lg: "h-11 rounded-md px-8",
|
|
icon: "h-10 w-10",
|
|
},
|
|
}
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: keyof typeof buttonVariants.variant
|
|
size?: keyof typeof buttonVariants.size
|
|
}
|
|
|
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
const baseClasses = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8D6B1D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
const variantClasses = buttonVariants.variant[variant]
|
|
const sizeClasses = buttonVariants.size[size]
|
|
|
|
return (
|
|
<button
|
|
className={cn(baseClasses, variantClasses, sizeClasses, className)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
Button.displayName = "Button"
|
|
|
|
export { Button } |