ywana-core8 0.1.79 → 0.1.80

package/src/html/textfield2.example.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from './textfield2'
+import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from '
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./textfield2'
 
 /**
  * Ejemplos de uso de los componentes TextField2 mejorados
@@ -87,9 +88,111 @@ export const TextField2Examples = () => {
         { value: 'urgent', label: 'Urgent', icon: 'warning' }
     ]
 
+    // Definir secciones para el menú lateral
+
+
+    const sections = 
+
+    [
+
+
+            {
+
+
+                    "id": "overview",
+
+
+                    "title": "Introducción",
+
+
+                    "icon": "info"
+
+
+            },
+
+
+            {
+
+
+                    "id": "basic-examples",
+
+
+                    "title": "Ejemplos Básicos",
+
+
+                    "icon": "widgets"
+
+
+            },
+
+
+            {
+
+
+                    "id": "advanced-features",
+
+
+                    "title": "Características Avanzadas",
+
+
+                    "icon": "settings"
+
+
+            },
+
+
+            {
+
+
+                    "id": "variants",
+
+
+                    "title": "Variantes y Temas",
+
+
+                    "icon": "palette"
+
+
+            },
+
+
+            {
+
+
+                    "id": "states",
+
+
+                    "title": "Estados",
+
+
+                    "icon": "toggle_on"
+
+
+            },
+
+
+            {
+
+
+                    "id": "sizes",
+
+
+                    "title": "Tamaños",
+
+
+                    "icon": "format_size"
+
+
+            }
+
+
+    ]
+
+
+
     return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Ejemplos de Componentes TextField2 Mejorados</h1>
+        <ExampleLayout title="Textfield2 Examples" sections={sections}>
+            <ExampleSection id="overview" title="Ejemplos de Componentes TextField2 Mejorados" icon="widgets">
             
             <div style={{ 
                 background: '#f8f9fa', 
@@ -1363,7 +1466,8 @@ export const TextField2Examples = () => {
                     </div>
                 </div>
             </section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }