23 lines
972 B
TypeScript
23 lines
972 B
TypeScript
 
|
import type { ButtonHTMLAttributes } from "react";
|
||
|
|
|
||
|
|
export type ButtonVariant = "primary" | "outline" | "quiet";
|
||
|
|
|
||
|
|
const variantClasses: Record<ButtonVariant, string> = {
|
||
|
|
primary:
|
||
|
|
"border-2 border-marquee bg-marquee/10 text-marquee shadow-[0_0_24px_rgba(255,122,41,0.35)] hover:bg-marquee/20",
|
||
|
|
outline: "border-2 border-chrome/50 text-paper hover:border-arc hover:text-arc",
|
||
|
|
quiet: "border border-transparent text-chrome hover:text-paper",
|
||
|
|
};
|
||
|
|
|
||
|
|
export function buttonClassName(variant: ButtonVariant = "primary", className = ""): string {
|
||
|
|
return `inline-block rounded-full px-6 py-3 font-display text-lg tracking-wide transition ${variantClasses[variant]} ${className}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||
|
|
variant?: ButtonVariant;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Button({ variant = "primary", className = "", ...props }: ButtonProps) {
|
||
|
|
return <button className={buttonClassName(variant, className)} {...props} />;
|
||
|
|
}
|