42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import { cn } from "@/lib/utils"
|
|
import { forwardRef, type ButtonHTMLAttributes } from "react"
|
|
|
|
interface SurrealButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: "primary" | "secondary" | "ghost" | "outline"
|
|
size?: "sm" | "md" | "lg"
|
|
}
|
|
|
|
export const SurrealButton = forwardRef<HTMLButtonElement, SurrealButtonProps>(
|
|
({ className, variant = "primary", size = "md", children, ...props }, ref) => {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={cn(
|
|
"relative inline-flex items-center justify-center font-medium transition-all duration-300 ease-out",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
"rounded-lg",
|
|
{
|
|
"bg-primary text-primary-foreground hover:brightness-110 hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-primary/30":
|
|
variant === "primary",
|
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:scale-[1.02] active:scale-[0.98]":
|
|
variant === "secondary",
|
|
"bg-transparent text-foreground hover:bg-secondary/50": variant === "ghost",
|
|
"border-2 border-primary bg-transparent text-primary hover:bg-primary/10": variant === "outline",
|
|
},
|
|
{
|
|
"px-3 py-1.5 text-sm": size === "sm",
|
|
"px-5 py-2.5 text-base": size === "md",
|
|
"px-7 py-3.5 text-lg": size === "lg",
|
|
},
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
},
|
|
)
|
|
SurrealButton.displayName = "SurrealButton"
|