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/Input.tsx
+++ b/frontend-next/components/Input.tsx
@@ -0,0 +1,82 @@
+/**
+ * 📝 Input Component
+ * Componente de input reutilizável com validação
+ */
+
+import React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  required?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      error,
+      helperText,
+      required = false,
+      id,
+      className = '',
+      type = 'text',
+      ...props
+    },
+    ref,
+  ) => {
+    const inputId = id || `input-${Math.random()}`;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-gray-700 mb-1"
+          >
+            {label}
+            {required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+        )}
+
+        <input
+          ref={ref}
+          id={inputId}
+          type={type}
+          className={`
+            w-full
+            px-4
+            py-2
+            border
+            rounded-lg
+            font-base
+            focus:outline-none
+            focus:ring-2
+            focus:ring-offset-2
+            transition-colors
+            disabled:bg-gray-50
+            disabled:text-gray-500
+            disabled:cursor-not-allowed
+            ${
+              error
+                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+                : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'
+            }
+            ${className}
+          `}
+          {...props}
+        />
+
+        {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
+        {helperText && !error && (
+          <p className="text-gray-500 text-sm mt-1">{helperText}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = 'Input';
+
+export default Input;