Cambios

src/app/(components)/button/page.tsx

@@ -1,68 +1,118 @@
-"use client";
+'use client';
 
-import IndiceContenido from "@/components/content-index";
-import VistaComponente from "@/components/vista-componente";
-import Button from "@/components/button";
+import IndiceContenido from '@/components/content-index';
+import VistaComponente from '@/components/vista-componente';
+import Button from '@/components/button';
 
 export default function Page() {
   return (
     <>
       <IndiceContenido
         items={[
-          { id: "button-basico", label: "Botón básico" },
-          { id: "button-icono", label: "Botón con ícono" },
-          { id: "button-props", label: "Props del componente" },
+          { id: 'button-basico', label: 'Botón básico' },
+          { id: 'button-icono', label: 'Botón con ícono' },
+          { id: 'button-props', label: 'Props del componente' },
         ]}
       />
 
-      <div className="my-5">
-        <h1 className="mb-4 display-5">
+      <div className='my-5'>
+        <h1 className='mb-4 display-5'>
           🧩 Componente: <code>Button</code>
         </h1>
 
-        <p className="mb-4 text-muted">
+        <p className='mb-4 text-muted'>
           El componente <code>&lt;Button /&gt;</code> permite crear botones con
           estilos de Bootstrap, variantes personalizables, íconos opcionales y
           soporte completo para props de HTML estándar.
         </p>
 
-        <hr className="my-5" />
+        <hr className='my-5' />
 
         <VistaComponente
-          id="button-basico"
-          title="🚀 Botón básico"
-          description="Un botón con texto y variante primaria (por defecto)."
+          id='button-basico'
+          title='🚀 Botón básico'
+          description='Un botón con texto y variante primaria (por defecto).'
           code={`<Button onClick={() => alert("¡Hola mundo!")}>
   Clic aquí
 </Button>`}
         >
-          <Button onClick={() => alert("¡Hola mundo!")} className="mb-3">
+          <Button onClick={() => alert('¡Hola mundo!')} className='mb-3'>
             Clic aquí
           </Button>
         </VistaComponente>
 
         <VistaComponente
-          id="button-icono"
-          title="🔔 Botón con ícono"
-          description="Puedes agregar un ícono Bootstrap usando el nombre del ícono o pasar un componente."
+          id='button-icono'
+          title='Botón con ícono'
+          description='Puedes agregar un ícono Bootstrap usando el nombre del ícono o pasar un componente.'
           code={`<Button icon="check-circle" variant="success">
   Guardar
 </Button>`}
         >
-          <Button icon="check-circle" variant="success" className="mb-3">
+          <Button icon='check-circle' variant='success' className='mb-3'>
             Guardar
           </Button>
         </VistaComponente>
 
+        <div className='mb-5'>
+          <p className='text-muted'>
+            Puedes consultar la lista completa de íconos disponibles en:{' '}
+            <a
+              href='https://icons.getbootstrap.com/'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              https://icons.getbootstrap.com/
+            </a>
+          </p>
+        </div>
+
+        <VistaComponente
+          id='button-size'
+          title='Botón con tamaño'
+          description='Puedes cambiar el tamaño del botón usando las clases de Bootstrap.'
+          code={`<Button icon="check-circle" variant="success" size="lg">
+  Guardar
+</Button>`}
+        >
+          <div className='d-flex align-items-center gap-3'>
+            <div>
+              <Button
+                icon='facebook'
+                variant='dorado'
+                className='mb-3'
+                size='lg'
+              >
+                Boton grande
+              </Button>
+            </div>
+            <div>
+              <Button icon='camera' variant='azul' className='mb-3'>
+                Boton normal
+              </Button>
+            </div>
+            <div>
+              <Button
+                icon='check-circle'
+                variant='success'
+                className='mb-3'
+                size='sm'
+              >
+                Boton pequeño
+              </Button>
+            </div>
+          </div>
+        </VistaComponente>
+
         {/* PROPS */}
-        <section className="mb-5" id="button-props">
-          <h2 className="h5 mb-3">⚙️ Props del componente</h2>
-          <table className="table table-bordered table-striped align-middle">
+        <section className='mb-5' id='button-props'>
+          <h2 className='h5 mb-3'>⚙️ Props del componente</h2>
+          <table className='table table-bordered table-striped align-middle'>
             <thead>
               <tr>
-                <th scope="col">Prop</th>
-                <th scope="col">Tipo</th>
-                <th scope="col">Descripción</th>
+                <th scope='col'>Prop</th>
+                <th scope='col'>Tipo</th>
+                <th scope='col'>Descripción</th>
               </tr>
             </thead>
             <tbody>
@@ -74,7 +124,7 @@ export default function Page() {
                   <code>string</code>
                 </td>
                 <td>
-                  Clase base del botón. Ej: <code>&quot;primary&quot;</code>,{" "}
+                  Clase base del botón. Ej: <code>&quot;primary&quot;</code>,{' '}
                   <code>&quot;danger&quot;</code>, etc.
                 </td>
               </tr>
@@ -158,7 +208,7 @@ export default function Page() {
                   <code>ButtonHTMLAttributes&lt;HTMLButtonElement&gt;</code>
                 </td>
                 <td>
-                  Soporta todas las props válidas de <code>&lt;button&gt;</code>{" "}
+                  Soporta todas las props válidas de <code>&lt;button&gt;</code>{' '}
                   nativo.
                 </td>
               </tr>

src/components/vista-componente.tsx

@@ -1,6 +1,6 @@
-import { CodeBlock } from "./code-block";
-import Button from "./button";
-import { useState } from "react";
+import { CodeBlock } from './code-block';
+import Button from './button';
+import { useState } from 'react';
 
 interface VistaComponenteProps {
   title: string;
@@ -20,23 +20,23 @@ export default function VistaComponente({
   const [showCode, setShowCode] = useState(false);
 
   return (
-    <section className="mb-5" id={id}>
-      <h2 className="h5 mb-2">{title}</h2>
-      {description && <p className="text-muted mb-2">{description}</p>}
+    <section className='mb-5' id={id}>
+      <h2 className='h5 mb-2'>{title}</h2>
+      {description && <p className='text-muted mb-2'>{description}</p>}
 
-      <div className="p-3 border rounded bg-light mb-3">
+      <div className='p-3 border rounded bg-light mb-3'>
         {children}
 
         {code && (
-          <div className="d-flex flex-column gap-2">
+          <div className='d-flex flex-column gap-2'>
             <Button
-              size="sm"
+              size='sm'
               outline
-              variant="secondary"
-              className="align-self-start mb-3"
+              variant='secondary'
+              className='align-self-start'
               onClick={() => setShowCode((prev) => !prev)}
             >
-              {showCode ? "Ocultar código" : "Ver código y copiar"}
+              {showCode ? 'Ocultar código' : 'Ver código y copiar'}
             </Button>
             {showCode && <CodeBlock code={code} />}
           </div>

src/styles/sass/bootstrap.scss

@@ -1,29 +1,29 @@
-@import "bootstrap/scss/functions";
+@import 'bootstrap/scss/functions';
 
-@import "variables";
+@import 'variables';
 
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
 
 // Include any default map overrides here
 $azul: #003d79;
 $dorado: #d59f0f;
 
 $custom-colors: (
-  "azul": $azul,
-  "dorado": $dorado,
+  'azul': $azul,
+  'dorado': $dorado,
 );
 
 $theme-colors: map-merge($theme-colors, $custom-colors);
 
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/bootstrap";
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/bootstrap';
 
-@import "gradients";
-@import "extends";
-@import "table";
-@import "utilities";
+@import 'gradients';
+@import 'extends';
+@import 'table';
+@import 'utilities';
 @import 'sidebar';
 @import 'hover';
 @import 'tabs';
@@ -33,7 +33,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 @include media-breakpoint-up(lg) {
   .bd-layout {
     display: grid;
-    grid-template-areas: "sidebar main";
+    grid-template-areas: 'sidebar main';
     grid-template-columns: 1fr 5fr;
     gap: $spacer * 1.5;
   }
@@ -60,3 +60,6 @@ ul.list-unstyled li {
   }
 }
 
+.btn-dorado {
+  color: $white !important;
+}