Fix, all good, hola

2025-04-03 21:05:11 -06:00
parent 8b3d695d1d
commit 2aac2488fd
26 changed files with 886 additions and 595 deletions
@@ -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>
+  );
+}