Preparacion del proyecto

src/components/button.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+/**
+ * Botón reutilizable con soporte para variantes de Bootstrap y personalización de íconos.
+ *
+ * @component
+ */
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Variante Bootstrap o personalizada. Ej: `primary`, `danger`, `mi-clase-custom`.
+   * @default "primary"
+   */
+  variant?: string;
+
+  /**
+   * Si se usa variante `outline` (por ejemplo, `btn-outline-primary`).
+   * @default false
+   */
+  outline?: boolean;
+
+  /**
+   * Ícono Bootstrap (`string`, como `check-circle`) o componente React.
+   */
+  icon?: string | React.ReactNode;
+
+  /**
+   * Tamaño del botón: `sm` o `lg` para tamaños Bootstrap.
+   */
+  size?: 'sm' | 'lg';
+
+  /**
+   * Clases adicionales personalizadas para el botón.
+   */
+  className?: string;
+}
+
+/**
+ * Componente `Button` con estilos de Bootstrap y soporte para íconos.
+ */
+const Button: React.FC<ButtonProps> = ({
+  children,
+  type = 'button',
+  icon,
+  className = '',
+  variant = 'primary',
+  outline = false,
+  disabled = false,
+  size,
+  ...rest
+}) => {
+  const btnVariant = outline ? `btn-outline-${variant}` : `btn-${variant}`;
+  const sizeClass = size ? `btn-${size}` : '';
+  const combinedClasses = `btn ${btnVariant} ${sizeClass} ${className}`.trim();
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={combinedClasses}
+      {...rest}
+    >
+      {typeof icon === 'string' ? (
+        <i className={`me-2 bi bi-${icon}`}></i>
+      ) : (
+        icon && <span className="me-2">{icon}</span>
+      )}
+      {children}
+    </button>
+  );
+};
+
+export default Button;