Started refactoring, added prettier and checks and reformatted project, added cspell and checks and custom project words, beginning of robotic oceanographic surface sampler content

src/components/Media/CustomCarousel/CustomCarousel.astro

@@ -0,0 +1,145 @@
+---
+import { Image } from "astro:assets";
+
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
+
+const groupToShow: carouselGroup = Astro.props.carouselGroup;
+---
+
+<custom-carousel
+  class="relative flex w-full flex-col"
+  data-custom-carousel={groupToShow.animation}
+  data-custom-carousel-interval={groupToShow.interval}
+>
+  <!-- Modal for fullscreen viewing -->
+  <div
+    tabindex="-1"
+    aria-hidden="true"
+    class="fixed inset-0 z-100 hidden w-full items-center justify-center"
+    data-custom-carousel-modal
+  >
+    <div class="relative h-full w-full p-4">
+      <!-- Modal content -->
+      <div
+        class="border-caperren-green relative h-full max-h-screen max-w-screen rounded-lg border-2 bg-black shadow-sm"
+      >
+        <!-- Modal header -->
+        <div class="flex items-center justify-between rounded-t p-1">
+          <button
+            type="button"
+            class="text-caperren-green ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light z-100 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm ring-2"
+            data-custom-carousel-modal-hide
+          >
+            <svg
+              class="h-3 w-3"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 14 14"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div
+          class="flex h-full w-full items-center justify-center overflow-hidden"
+          data-custom-carousel-modal-image
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Carousel wrapper -->
+  <div class="relative h-56 w-full overflow-hidden md:h-120">
+    {
+      groupToShow.images.map((image, index) => (
+        <div
+          class="hidden duration-1500 ease-in-out"
+          data-custom-carousel-item={index}
+        >
+          <Image
+            src={image}
+            class="absolute inset-0 m-auto h-full max-h-full w-auto max-w-full object-contain"
+            alt="..."
+            layout="constrained"
+            loading="eager"
+          />
+        </div>
+      ))
+    }
+  </div>
+
+  <!-- Slider indicators -->
+  {
+    groupToShow.images.length > 1 && (
+      <div>
+        <div class="absolute bottom-2 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rounded-full">
+          {groupToShow.images.map((_, index) => (
+            <button
+              type="button"
+              class="hover:bg-caperren-green-light h-3 w-3 rounded-full bg-black"
+              aria-current={index ? "false" : "true"}
+              aria-label={index.toString()}
+              data-custom-carousel-slide-to={index}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          class="group absolute start-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
+          data-custom-carousel-prev
+        >
+          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+            <svg
+              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 6 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M5 1 1 5l4 4"
+              />
+            </svg>
+            <span class="hidden">Previous</span>
+          </span>
+        </button>
+        <button
+          type="button"
+          class="group absolute end-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
+          data-custom-carousel-next
+        >
+          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+            <svg
+              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 6 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m1 9 4-4-4-4"
+              />
+            </svg>
+            <span class="hidden">Next</span>
+          </span>
+        </button>
+      </div>
+    )
+  }
+</custom-carousel>
+
+<script src="./custom-carousel.ts"></script>