52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Variant = "primary" | "secondary" | "ghost" | "danger";
|
|
type Size = "sm" | "md" | "lg";
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: Variant;
|
|
size?: Size;
|
|
as?: "button" | "a";
|
|
href?: string;
|
|
}
|
|
|
|
const variantClass: Record<Variant, string> = {
|
|
primary: "asf-btn-primary",
|
|
secondary: "asf-btn-secondary",
|
|
ghost: "asf-btn-ghost",
|
|
danger: "asf-btn bg-red-50 text-red-700 hover:bg-red-100 border-red-100",
|
|
};
|
|
|
|
const sizeClass: Record<Size, string> = {
|
|
sm: "text-xs px-2.5 py-1.5",
|
|
md: "text-sm px-3.5 py-2",
|
|
lg: "text-base px-5 py-2.5",
|
|
};
|
|
|
|
export function Button({
|
|
variant = "primary",
|
|
size = "md",
|
|
className,
|
|
as = "button",
|
|
href,
|
|
children,
|
|
...rest
|
|
}: ButtonProps) {
|
|
const cls = cn(variantClass[variant], sizeClass[size], className);
|
|
if (as === "a" && href) {
|
|
return (
|
|
<a href={href} className={cls} {...(rest as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|
|
return (
|
|
<button className={cls} {...rest}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|