feat(frontend): React UI — pages, forms, audit log section, Tailwind, Vite build

2026-04-15 13:18:31 -04:00
parent f1d2449808
commit c32a5d200d
22 changed files with 10356 additions and 0 deletions
@@ -0,0 +1,49 @@
+import React from 'react';
+
+const variants = {
+  primary: 'bg-blue-600 hover:bg-blue-700 text-white border-transparent',
+  secondary: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300',
+  danger: 'bg-red-600 hover:bg-red-700 text-white border-transparent',
+  ghost: 'bg-transparent hover:bg-gray-100 text-gray-600 border-transparent',
+};
+
+const sizes = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-6 py-3 text-base',
+};
+
+export default function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  onClick,
+  type = 'button',
+  className = '',
+  ...rest
+}) {
+  return (
+    <button
+      type={type}
+      disabled={disabled || loading}
+      onClick={onClick}
+      className={`
+        inline-flex items-center gap-1.5 rounded-md border font-medium
+        transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+        disabled:opacity-50 disabled:cursor-not-allowed
+        ${variants[variant]} ${sizes[size]} ${className}
+      `}
+      {...rest}
+    >
+      {loading && (
+        <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+}