OPtimized components

docs/demo_display.md

@@ -1,5 +1,28 @@
 # Display
 
+## Card
+<div id="demo-card"></div>
+
+```js
+mount(
+  Card({ class: 'bg-base-100 w-96 shadow-xl' }, [
+    figure(img({ src: 'https://picsum.photos/400/200', alt: 'Imagen' })),
+    CardBody({}, [
+      CardTitle({}, '¡Nuevo producto!'),
+      p('Esta tarjeta muestra la composición flexible. Puedes añadir imágenes, texto, badges y más.'),
+      div({ class: 'flex gap-2 mt-2' }, [
+        Badge({ class: 'badge-primary' }, 'Nuevo'),
+        Badge({ class: 'badge-outline' }, 'En stock')
+      ])
+    ]),
+    CardActions({ class: 'justify-end m-4 gap-4' }, [
+      Button({ class: 'btn-ghost btn-sm' }, 'Cancelar'),
+      Button({ class: 'btn-primary btn-sm' }, 'Comprar')
+    ])
+  ]),
+  '#demo-card'
+);
+```
 ## Badge
 <div id="demo-badge"></div>
 
@@ -64,19 +87,39 @@ const users = [
   { id: 3, name: 'Charlie', role: 'Viewer' }
 ];
 
-mount(
-  Table({
-    items: users,
-    columns: [
-      { key: 'name', label: 'Name' },
-      { key: 'role', label: 'Role' },
-      { render: (it) => Button({ class: 'btn-xs' }, 'Edit') }
-    ],
-    class: 'table-zebra'
-  }),
+mount([
+  Table({ class: 'table-zebra' },
+    TableItems({ items: users, columns: [{ key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }] })
+  ),
+  Table({ class: 'table-zebra' }, [
+    h('thead', {}, h('tr', {}, [h('th', {}, 'Nombre'), h('th', {}, 'Acción')])),
+    h('tbody', {},
+      users.map( user => h('tr', {}, [
+        h('td', {}, user.name),
+        h('td', {}, Button({ class: 'btn-xs' }, 'Editar'))
+      ]))
+    )
+  ])
+  ],
   '#demo-table'
-);
+)
 ```
+## Textrotate
+<div id="demo-textrotate"></div>
+
+```js
+mount(
+  Textrotate({ class: 'text-2xl font-bold' },
+  span({class:"bg-base-200"},[
+    span({}, 'Reactivo'),
+    span({}, 'Simple'),
+    span({}, 'Rápido'),
+    span({}, 'SigPro')
+  ])),
+  '#demo-textrotate'
+)
+```
+
 
 ## Timeline
 <div id="demo-timeline"></div>