From 5d569e3698de14475f86e9748994ec3c9c8bd5e5 Mon Sep 17 00:00:00 2001
From: jalvarado <alvaradojr2001@gmail.com>
Date: Tue, 25 Mar 2025 14:27:01 -0600
Subject: [PATCH] Cambios

---
 public/button.png                    | Bin 0 -> 10987 bytes
 src/app/(components)/button/page.tsx | 104 ++++++++++++++++++++-------
 src/components/vista-componente.tsx  |  24 +++----
 src/styles/sass/bootstrap.scss       |  31 ++++----
 4 files changed, 106 insertions(+), 53 deletions(-)
 create mode 100644 public/button.png

diff --git a/public/button.png b/public/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d52fec219d3c7172891f0c4b0a8c299f5ab0aae
GIT binary patch
literal 10987
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
AhX4Qo

literal 0
HcmV?d00001

diff --git a/src/app/(components)/button/page.tsx b/src/app/(components)/button/page.tsx
index fc8642e..52251c4 100644
--- a/src/app/(components)/button/page.tsx
+++ b/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>
diff --git a/src/components/vista-componente.tsx b/src/components/vista-componente.tsx
index 8a215ce..b8f75bf 100644
--- a/src/components/vista-componente.tsx
+++ b/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>
diff --git a/src/styles/sass/bootstrap.scss b/src/styles/sass/bootstrap.scss
index 2da8cbe..e4cbffe 100644
--- a/src/styles/sass/bootstrap.scss
+++ b/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;
+}