Create frontend/src/components/ui/button.jsx

frontend/src/components/ui/button.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+const base =
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
+
+const variants = {
+  default: "bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm",
+  outline:
+    "border border-slate-200 bg-white text-slate-900 hover:bg-slate-50",
+  ghost: "bg-transparent text-slate-700 hover:bg-slate-100",
+};
+
+const sizes = {
+  default: "h-10 px-4 py-2",
+  sm: "h-8 px-3 text-xs",
+  lg: "h-11 px-6 text-sm",
+  icon: "h-9 w-9",
+};
+
+export function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return (
+    <button
+      className={cn(
+        base,
+        variants[variant] || variants.default,
+        sizes[size] || sizes.default,
+        className
+      )}
+      {...props}
+    />
+  );
+}