Input
+
El componente <Input /> es un campo de entrada
- reutilizable con soporte para etiquetas, tipos como{" "}
+ reutilizable con soporte para etiquetas, tipos como{' '}
password, accesibilidad mejorada, y personalización de
estilos. Además, incluye un botón para mostrar/ocultar contraseñas
cuando el tipo es password.
| Prop | -Tipo | -Descripción | +Prop | +Tipo | +Descripción |
- Tipo del input. Soporta cualquier tipo válido de HTML como{" "}
+ Tipo del input. Soporta cualquier tipo válido de HTML como{' '}
text, password, email,
etc.
|
@@ -174,7 +178,7 @@ export default function Page() {
- Cualquier otra prop válida de un <input />{" "}
+ Cualquier otra prop válida de un <input />{' '}
estándar.
|
diff --git a/src/app/(components)/table/page.tsx b/src/app/(components)/table/page.tsx
index bf3a8e2..ccf4e9c 100644
--- a/src/app/(components)/table/page.tsx
+++ b/src/app/(components)/table/page.tsx
@@ -1,21 +1,21 @@
-"use client";
+'use client';
-import React, { useState } from "react";
-import Table, { Header, TableSkeleton } from "@/components/table";
-import VistaComponente from "@/components/vista-componente";
+import React, { useState } from 'react';
+import Table, { Header, TableSkeleton } from '@/components/table';
+import VistaComponente from '@/components/vista-componente';
import {
tableBasicExample,
tableSkeletonExample,
-} from "@/snippets/table/table-basic";
-import { tableClickable } from "@/snippets/table/table-clickable";
-import { tableAutoPagination } from "@/snippets/table/table-auto-pagination";
-import { tableCustomPagination } from "@/snippets/table/table-custom-pagination";
-import { tableCustomCellRender } from "@/snippets/table/table-custom-cell-render";
-import { tableColumnWidth } from "@/snippets/table/table-column-width";
-import { CodeBlock } from "@/components/code-block";
-import Input from "@/components/input";
-import { tableFilter } from "@/snippets/table/table-filter";
-import IndiceContenido from "@/components/content-index";
+} from '@/snippets/table/table-basic';
+import { tableClickable } from '@/snippets/table/table-clickable';
+import { tableAutoPagination } from '@/snippets/table/table-auto-pagination';
+import { tableCustomPagination } from '@/snippets/table/table-custom-pagination';
+import { tableCustomCellRender } from '@/snippets/table/table-custom-cell-render';
+import { tableColumnWidth } from '@/snippets/table/table-column-width';
+import { CodeBlock } from '@/components/code-block';
+import Input from '@/components/input';
+import { tableFilter } from '@/snippets/table/table-filter';
+import IndiceContenido from '@/components/content-index';
export default function Page() {
const headers: Header<{
@@ -24,20 +24,20 @@ export default function Page() {
email: string;
acciones?: null;
}>[] = [
- { key: "name", label: "Nombre", width: "30%" },
- { key: "age", label: "Edad", width: "15%" },
- { key: "email", label: "Correo", width: "40%" },
+ { key: 'name', label: 'Nombre', width: '30%' },
+ { key: 'age', label: 'Edad', width: '15%' },
+ { key: 'email', label: 'Correo', width: '40%' },
];
const baseData = [
- { name: "Juan", age: 20, email: "juan@example.com" },
- { name: "María", age: 25, email: "maria@example.com" },
- { name: "Pedro", age: 30, email: "pedro@example.com" },
- { name: "Luisa", age: 28, email: "luisa@example.com" },
+ { name: 'Juan', age: 20, email: 'juan@example.com' },
+ { name: 'María', age: 25, email: 'maria@example.com' },
+ { name: 'Pedro', age: 30, email: 'pedro@example.com' },
+ { name: 'Luisa', age: 28, email: 'luisa@example.com' },
];
const [currentPage, setCurrentPage] = useState(1);
- const [search, setSearch] = useState("");
+ const [search, setSearch] = useState('');
const filteredData = baseData.filter((item) =>
item.name.toLowerCase().includes(search.toLowerCase())
@@ -47,43 +47,43 @@ export default function Page() {
<>
|---|