first

frontend/asf-web/components/ui/Button.tsx

@@ -0,0 +1,51 @@
+"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>
+  );
+}