fix space

superpage/src/components/Carousel.astro

@@ -5,67 +5,67 @@ const { items = [] } = Astro.props;
 ---
 
 <div data-ride="carousel" class="relative">
-    <button
-        data-toggle="prev"
-        class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
-        aria-label="Anterior"
-    >
-        <Icon name="chevron-left" class="size-6" />
-    </button>
+  <button
+    data-toggle="prev"
+    class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
+    aria-label="Anterior"
+  >
+    <Icon name="chevron-left" class="size-6" />
+  </button>
 
-    <button
-        data-toggle="next"
-        class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
-        aria-label="Próximo"
-    >
-        <Icon name="chevron-right" class="size-6" />
-    </button>
+  <button
+    data-toggle="next"
+    class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
+    aria-label="Próximo"
+  >
+    <Icon name="chevron-right" class="size-6" />
+  </button>
 
-    <div
-        class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
-    >
-        {
-            items.map((Component, idx) => (
-                <div
-                    class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
-                    id={`slide${idx + 1}`}
-                >
-                    <Component class="size-48 lg:size-38 fill-white" />
-                </div>
-            ))
-        }
-    </div>
+  <div
+    class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
+  >
+    {
+      items.map((Component, idx) => (
+        <div
+          class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
+          id={`slide${idx + 1}`}
+        >
+          <Component class="size-48 lg:size-38 fill-white" />
+        </div>
+      ))
+    }
+  </div>
 </div>
 
 <script>
-    const carousel = document.querySelector("[data-ride=carousel]");
-    const slides = carousel?.querySelectorAll(".snap-center");
-    let currentIndex = 0;
+  const carousel = document.querySelector("[data-ride=carousel]");
+  const slides = carousel?.querySelectorAll(".snap-center");
+  let currentIndex = 0;
 
-    const scrollToSlide = (index: number) => {
-        if (!slides) {
-            return;
-        }
+  const scrollToSlide = (index: number) => {
+    if (!slides) {
+      return;
+    }
 
-        if (index >= 0 && index < slides.length) {
-            slides[index].scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "center",
-            });
-            currentIndex = index;
-        }
-    };
+    if (index >= 0 && index < slides.length) {
+      slides[index].scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+      currentIndex = index;
+    }
+  };
 
-    carousel
-        ?.querySelector("[data-toggle=prev]")
-        ?.addEventListener("click", () => {
-            scrollToSlide(currentIndex - 1);
-        });
+  carousel
+    ?.querySelector("[data-toggle=prev]")
+    ?.addEventListener("click", () => {
+      scrollToSlide(currentIndex - 1);
+    });
 
-    carousel
-        ?.querySelector("[data-toggle=next]")
-        ?.addEventListener("click", () => {
-            scrollToSlide(currentIndex + 1);
-        });
+  carousel
+    ?.querySelector("[data-toggle=next]")
+    ?.addEventListener("click", () => {
+      scrollToSlide(currentIndex + 1);
+    });
 </script>