57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { type ButtonHTMLAttributes, forwardRef } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Variant = "primary" | "secondary" | "ghost" | "outline-light";
|
|
type Size = "sm" | "md" | "lg";
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: Variant;
|
|
size?: Size;
|
|
shimmer?: boolean;
|
|
as?: "button";
|
|
}
|
|
|
|
const variants: Record<Variant, string> = {
|
|
primary:
|
|
"bg-[var(--color-moy-gold)] text-[var(--color-moy-dark)] hover:bg-[var(--color-moy-gold-light)] font-bold shadow-[var(--shadow-gold)] hover:shadow-[var(--shadow-gold-lg)]",
|
|
secondary:
|
|
"border border-[var(--color-moy-gold)] text-[var(--color-moy-gold)] hover:bg-[var(--color-moy-gold)] hover:text-[var(--color-moy-dark)] font-medium",
|
|
ghost:
|
|
"text-[var(--color-moy-gold)] hover:bg-[var(--color-moy-gold-faint)] font-medium",
|
|
"outline-light":
|
|
"border border-white/50 text-white hover:border-white hover:bg-white/10 font-medium",
|
|
};
|
|
|
|
const sizes: Record<Size, string> = {
|
|
sm: "px-5 py-2 text-[11px] tracking-[0.15em]",
|
|
md: "px-8 py-3.5 text-[11px] tracking-[0.18em]",
|
|
lg: "px-10 py-4 text-[11px] tracking-[0.2em]",
|
|
};
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ className, variant = "primary", size = "md", shimmer = false, children, ...props }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
className={cn(
|
|
"relative inline-flex items-center justify-center uppercase overflow-hidden",
|
|
"transition-all duration-300",
|
|
variants[variant],
|
|
sizes[size],
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{shimmer && (
|
|
<span
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-0 moy-shimmer opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
|
/>
|
|
)}
|
|
<span className="relative">{children}</span>
|
|
</button>
|
|
)
|
|
);
|
|
Button.displayName = "Button";
|