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

frontend-next/components/Card.tsx

@@ -0,0 +1,100 @@
+/**
+ * 🎯 Card Component
+ * Componente de card/painel reutilizável
+ */
+
+import React from 'react';
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: 'default' | 'outlined';
+  clickable?: boolean;
+  onClick?: () => void;
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  className = '',
+  variant = 'default',
+  clickable = false,
+  onClick,
+}) => {
+  const variantStyles = {
+    default: 'bg-white border border-gray-200 shadow-sm',
+    outlined: 'bg-transparent border border-gray-200',
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={`
+        rounded-lg
+        p-6
+        transition-all
+        duration-200
+        ${variantStyles[variant]}
+        ${clickable ? 'cursor-pointer hover:shadow-md' : ''}
+        ${className}
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface CardHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({
+  children,
+  className = '',
+}) => (
+  <div className={`mb-4 border-b border-gray-200 pb-3 ${className}`}>
+    {children}
+  </div>
+);
+
+interface CardTitleProps {
+  children: React.ReactNode;
+  className?: string;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export const CardTitle: React.FC<CardTitleProps> = ({
+  children,
+  className = '',
+  as: Component = 'h2',
+}) => (
+  <Component className={`text-lg font-bold text-gray-900 ${className}`}>
+    {children}
+  </Component>
+);
+
+interface CardContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const CardContent: React.FC<CardContentProps> = ({
+  children,
+  className = '',
+}) => <div className={`${className}`}>{children}</div>;
+
+interface CardFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const CardFooter: React.FC<CardFooterProps> = ({
+  children,
+  className = '',
+}) => (
+  <div className={`mt-6 border-t border-gray-200 pt-3 ${className}`}>
+    {children}
+  </div>
+);
+
+export default Card;