-
-
-
- Get started by editing
src/app/page.tsx. -
- - Save and see your changes instantly. -
+
);
}
diff --git a/src/components/bootstrap-client.tsx b/src/components/bootstrap-client.tsx
new file mode 100644
index 0000000..f0f92f1
--- /dev/null
+++ b/src/components/bootstrap-client.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { useEffect } from 'react';
+
+export default function BootstrapClient() {
+ useEffect(() => {
+ const loadBootstrap = async () => {
+ if (typeof document !== 'undefined') {
+ // @ts-expect-error: Bootstrap is loaded dynamically
+ await import('bootstrap/dist/js/bootstrap.bundle.min.js');
+ }
+ };
+
+ loadBootstrap();
+ }, []);
+
+ return null;
+}
diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 0000000..dd46dc3
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+/**
+ * Botón reutilizable con soporte para variantes de Bootstrap y personalización de íconos.
+ *
+ * @component
+ */
+interface ButtonProps extends React.ButtonHTMLAttributesSistema de Impresiones
-
-
-
+
+
+
+
+
+ {/* Escáner ZXing */}
+ {enableScan && (
+
+
+ )}
+
+ {/* Resultados */}
+
+
+
+
+ Resultados
+
+
+ {/* Formulario de registro de folio */}
+
+
+ {statusMessage &&
+
+
+ Nombres
+
+ Jorge Miguel
+
+ Apellidos
+
+ Alvarado Diaz
+
+ Numero de cuenta
+
+ {numeroCuenta}
+
+ Saldo
+
+ $13
+ {statusMessage}
}
+ {options.map((option, index) => {
+ const checked = isSelected(option.value);
+ const limitReached =
+ maxSelected !== undefined &&
+ selectedValues.length >= maxSelected &&
+ !checked;
+
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/component-card.tsx b/src/components/component-card.tsx
new file mode 100644
index 0000000..ecdce45
--- /dev/null
+++ b/src/components/component-card.tsx
@@ -0,0 +1,30 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+interface ComponentCardProps {
+ title: string;
+ src: string;
+ href: string;
+}
+
+export default function ComponentCard({
+ title,
+ src,
+ href,
+}: ComponentCardProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/content-index.tsx b/src/components/content-index.tsx
new file mode 100644
index 0000000..069d313
--- /dev/null
+++ b/src/components/content-index.tsx
@@ -0,0 +1,23 @@
+interface IndiceContenidoProps {
+ items: {
+ id: string;
+ label: string;
+ }[];
+}
+
+export default function IndiceContenido({ items }: IndiceContenidoProps) {
+ return (
+
+ );
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..a766c96
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,32 @@
+import Image from 'next/image';
+import React from 'react';
+import Link from 'next/link';
+
+export default function Header({ small = false }: { small?: boolean }) {
+ return (
+ {title}
+
+
+
+
+ {label && inputId && (
+
+ )}
+
+ );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..18c9c3f
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import Link from "next/link";
+
+const Navbar: React.FC = () => {
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
new file mode 100644
index 0000000..19a2ac2
--- /dev/null
+++ b/src/components/pagination.tsx
@@ -0,0 +1,105 @@
+import React, { useMemo } from "react";
+
+interface PaginationProps {
+ totalPages: number;
+ currentPage: number;
+ onPageChange: (page: number) => void;
+ delta?: number;
+}
+
+export default function Pagination({
+ currentPage,
+ onPageChange,
+ totalPages,
+ delta = 1,
+}: PaginationProps) {
+ const handlePageChange = (page: number) => {
+ if (page >= 1 && page <= totalPages && page !== currentPage) {
+ onPageChange(page);
+ }
+ };
+
+ const visiblePages = useMemo(() => {
+ const pages: (number | -1)[] = [];
+
+ if (totalPages <= 5 + delta * 2) {
+ return Array.from({ length: totalPages }, (_, i) => i + 1);
+ }
+
+ const left = Math.max(2, currentPage - delta);
+ const right = Math.min(totalPages - 1, currentPage + delta);
+
+ pages.push(1);
+ if (left > 2) pages.push(-1);
+
+ for (let i = left; i <= right; i++) {
+ pages.push(i);
+ }
+
+ if (right < totalPages - 1) pages.push(-1);
+ pages.push(totalPages);
+
+ return pages;
+ }, [currentPage, totalPages, delta]);
+
+ return (
+
+ );
+}
diff --git a/src/components/radio-option-group.tsx b/src/components/radio-option-group.tsx
new file mode 100644
index 0000000..c4464d0
--- /dev/null
+++ b/src/components/radio-option-group.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+export interface RadioOption
+
+ {isPassword && (
+
+ )}
+
+
+ {options.map((option, index) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/scanner.jsx b/src/components/scanner.jsx
new file mode 100644
index 0000000..a878b8e
--- /dev/null
+++ b/src/components/scanner.jsx
@@ -0,0 +1,22 @@
+import React, { useEffect, useRef } from 'react';
+import { BrowserMultiFormatReader } from '@zxing/library';
+
+export default function MultiScanner({ onDetected }) {
+ const videoRef = useRef(null);
+
+ useEffect(() => {
+ const codeReader = new BrowserMultiFormatReader();
+ codeReader
+ .decodeFromVideoDevice(null, videoRef.current, (result, err) => {
+ if (result) {
+ console.log(result);
+ onDetected(result.getText());
+ }
+ })
+ .catch((err) => console.error(err));
+
+ return () => codeReader.reset();
+ }, [onDetected]);
+
+ return ;
+}
diff --git a/src/components/select.tsx b/src/components/select.tsx
new file mode 100644
index 0000000..364d43c
--- /dev/null
+++ b/src/components/select.tsx
@@ -0,0 +1,103 @@
+import React, { useId } from 'react';
+
+interface Option {
+ value: string | number;
+ label: string;
+}
+
+interface SelectProps
+ extends Omit