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/Checkbox.tsx
+++ b/frontend-next/components/Checkbox.tsx
@@ -0,0 +1,48 @@
+/**
+ * ✓ Checkbox Component
+ */
+
+import React from 'react';
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ label, error, id, className = '', ...props }, ref) => {
+    const checkboxId = id || `checkbox-${Math.random()}`;
+
+    return (
+      <div className="flex items-center">
+        <input
+          ref={ref}
+          id={checkboxId}
+          type="checkbox"
+          className={`
+            w-5
+            h-5
+            rounded
+            border-gray-300
+            text-blue-600
+            focus:ring-blue-500
+            cursor-pointer
+            ${error ? 'border-red-500' : 'border-gray-300'}
+            ${className}
+          `}
+          {...props}
+        />
+        {label && (
+          <label htmlFor={checkboxId} className="ml-2 text-gray-700 cursor-pointer">
+            {label}
+          </label>
+        )}
+        {error && <p className="text-red-500 text-sm ml-2">{error}</p>}
+      </div>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;