feat(components): Create UI components - Button, Input, Card, Checkbox

2025-12-01 01:45:24 -03:00
parent 888e4e4d60
commit 9b3659504e
5 changed files with 351 additions and 0 deletions
--- a/frontend-next/components/Button.tsx
+++ b/frontend-next/components/Button.tsx
@@ -0,0 +1,107 @@
+/**
+ * 🔘 Button Component
+ * Componente de botão reutilizável com múltiplas variações
+ */
+
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
+  fullWidth?: boolean;
+  children: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      isLoading = false,
+      fullWidth = false,
+      disabled,
+      className = '',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    // Estilos base
+    const baseStyles =
+      'font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
+
+    // Estilos por tamanho
+    const sizeStyles = {
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-4 py-2 text-base',
+      lg: 'px-6 py-3 text-lg',
+    };
+
+    // Estilos por variante
+    const variantStyles = {
+      primary:
+        'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 disabled:bg-blue-400',
+      secondary:
+        'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400 disabled:bg-gray-100',
+      ghost:
+        'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-400 disabled:text-gray-400',
+      danger:
+        'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 disabled:bg-red-400',
+    };
+
+    // Largura total
+    const widthStyle = fullWidth ? 'w-full' : '';
+
+    // Estado desabilitado
+    const isDisabled = disabled || isLoading;
+
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        className={`
+          ${baseStyles}
+          ${sizeStyles[size]}
+          ${variantStyles[variant]}
+          ${widthStyle}
+          ${isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}
+          ${className}
+        `}
+        {...props}
+      >
+        {isLoading ? (
+          <span className="flex items-center justify-center gap-2">
+            <svg
+              className="h-4 w-4 animate-spin"
+              xmlns="http://www.w3.org/2000/svg"
+              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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            Carregando...
+          </span>
+        ) : (
+          children
+        )}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;