42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { type ButtonHTMLAttributes, forwardRef } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ButtonVariant = "primary" | "secondary" | "tertiary" | "telegram";
|
|
type ButtonSize = "sm" | "md" | "lg";
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
}
|
|
|
|
const variantStyles: Record<ButtonVariant, string> = {
|
|
primary:
|
|
"bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold hover:scale-105 active:opacity-80 transition-all",
|
|
secondary:
|
|
"bg-surface-container-highest text-on-surface hover:bg-surface-bright transition-colors",
|
|
tertiary: "text-primary-fixed-dim hover:opacity-80 transition-opacity",
|
|
telegram:
|
|
"bg-[#24A1DE] text-white hover:opacity-90 transition-opacity",
|
|
};
|
|
|
|
const sizeStyles: Record<ButtonSize, string> = {
|
|
sm: "px-4 py-2 text-sm rounded-md",
|
|
md: "px-6 py-2.5 rounded-lg",
|
|
lg: "px-10 py-4 rounded-lg font-bold",
|
|
};
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ variant = "primary", size = "md", className, children, ...rest }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
className={cn(variantStyles[variant], sizeStyles[size], className)}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
);
|
|
|
|
Button.displayName = "Button";
|
|
export { Button, type ButtonProps };
|