Fix, all good, hola

src/components/carousel.tsx

@@ -0,0 +1,82 @@
+import Image from 'next/image';
+import React from 'react';
+
+interface CarouselProps {
+  id?: string;
+  images?: {
+    src: string;
+    alt?: string;
+  }[];
+}
+
+export default function Carousel({
+  id = 'carouselExample',
+  images = [
+    {
+      src: '/banner1.png',
+      alt: 'Imagen de ejemplo',
+    },
+    {
+      src: '/banner2.png',
+      alt: 'Imagen de ejemplo',
+    },
+  ],
+}: CarouselProps) {
+  if (!images || images.length === 0) {
+    return <div>No hay imágenes para mostrar</div>;
+  }
+
+  return (
+    <div id={id} className="carousel slide" data-bs-ride="carousel">
+      <div className="carousel-inner">
+        {images.map((img, index) => (
+          <div
+            key={index}
+            className={`carousel-item ${index === 0 ? 'active' : ''}`}
+          >
+            <Image
+              src={img.src}
+              width={1000}
+              height={400}
+              alt="Ejemplo de banner"
+              className="d-block w-100 rounded-3"
+              style={{
+                objectFit: 'cover',
+                objectPosition: 'center',
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      {images.length > 1 && (
+        <>
+          <button
+            className="carousel-control-prev"
+            type="button"
+            data-bs-target={`#${id}`}
+            data-bs-slide="prev"
+          >
+            <span
+              className="carousel-control-prev-icon"
+              aria-hidden="true"
+            ></span>
+            <span className="visually-hidden">Anterior</span>
+          </button>
+          <button
+            className="carousel-control-next"
+            type="button"
+            data-bs-target={`#${id}`}
+            data-bs-slide="next"
+          >
+            <span
+              className="carousel-control-next-icon"
+              aria-hidden="true"
+            ></span>
+            <span className="visually-hidden">Siguiente</span>
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

src/components/formulario-card.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import Link from 'next/link';
+import { GetCuestionario } from '@/types/cuestionario';
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+interface Props {
+  cuestionario: GetCuestionario;
+  link: string;
+}
+
+export default function FormularioCard({ cuestionario, link }: Props) {
+  const [verMas, setVerMas] = useState(false);
+  const descripcion = cuestionario.descripcion;
+  const limite = 100;
+
+  const descripcionRecortada =
+    descripcion.length > limite && !verMas
+      ? `${descripcion.slice(0, limite)}...`
+      : descripcion;
+
+  return (
+    <div className="col-md-4 my-4">
+      <div className="card card-blog d-flex flex-column justify-content-between">
+        <div>
+          <div className="card-image">
+            <Link href={link}>
+              <Image width={400} height={300} className="img" src="/banner1.png" alt="Banner formulario" />
+              <div className="card-caption">{cuestionario.nombre_form}</div>
+            </Link>
+            <div className="ripple-cont"></div>
+          </div>
+
+          <div className="table px-3 pt-3 mb-0">
+            <h6 className="category text-info">
+              {cuestionario.id_tipo_cuestionario === 1 ? 'Feria' : 'Evento'}
+            </h6>
+            <p className="card-description mb-0">
+              {descripcionRecortada}
+              {descripcion.length > limite && (
+                <button
+                  onClick={() => setVerMas(!verMas)}
+                  className="btn btn-link btn-sm p-0 ms-1 align-baseline"
+                  style={{ fontSize: '0.875rem' }}
+                >
+                  {verMas ? 'Ver menos' : 'Ver más'}
+                </button>
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/qr-reader.tsx

@@ -0,0 +1,9 @@
+// components/QrReader.tsx
+'use client';
+
+import { Scanner } from '@yudiel/react-qr-scanner';
+
+export default function QrReader() {
+    return <Scanner onScan={(result) => console.log(result)} />;
+
+}

src/components/qr-scanner.tsx

@@ -1,70 +0,0 @@
-// file: Html5QrcodePlugin.tsx
-'use client';
-
-import { Html5QrcodeScanner, Html5QrcodeCameraScanConfig } from 'html5-qrcode';
-import { useEffect } from 'react';
-
-const qrcodeRegionId = 'html5qr-code-full-region';
-
-interface Html5QrcodePluginProps extends Partial<Html5QrcodeCameraScanConfig> {
-  verbose?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  qrCodeSuccessCallback: (decodedText: string, decodedResult: any) => void;
-  qrCodeErrorCallback?: (errorMessage: string) => void;
-}
-
-const createConfig = (
-  props: Html5QrcodePluginProps
-): Html5QrcodeCameraScanConfig => {
-  const config: Html5QrcodeCameraScanConfig = { fps: 10 }; // Default fps value set to 10
-
-  if (props.fps !== undefined) {
-    config.fps = props.fps;
-  }
-  if (props.qrbox !== undefined) {
-    config.qrbox = props.qrbox;
-  }
-  if (props.aspectRatio !== undefined) {
-    config.aspectRatio = props.aspectRatio;
-  }
-  if (props.disableFlip !== undefined) {
-    config.disableFlip = props.disableFlip;
-  }
-
-  return config;
-};
-
-const Html5QrcodePlugin: React.FC<Html5QrcodePluginProps> = (props) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    // Previene ejecución en SSR
-    if (typeof window === 'undefined') return;
-
-    const config = createConfig(props);
-    const verbose = props.verbose === true;
-
-    if (!props.qrCodeSuccessCallback) {
-      throw new Error('qrCodeSuccessCallback is required.');
-    }
-
-    const html5QrcodeScanner = new Html5QrcodeScanner(
-      qrcodeRegionId,
-      config,
-      verbose
-    );
-    html5QrcodeScanner.render(
-      props.qrCodeSuccessCallback,
-      props.qrCodeErrorCallback
-    );
-
-    return () => {
-      html5QrcodeScanner.clear().catch((error) => {
-        console.error('Failed to clear html5QrcodeScanner: ', error);
-      });
-    };
-  }, []);
-
-  return <div id={qrcodeRegionId} />;
-};
-
-export default Html5QrcodePlugin;