feat: ✨ add gallery slider component

src/components/ref-gallery.webc

@@ -0,0 +1,165 @@
+<script>
+  const galleryTrack = document.querySelector('.gallery .track');
+  const galleryElements = document.querySelectorAll('.gallery .track > *');
+  const galleryIndicator = document.querySelector('.gallery .indicator');
+  const galleryPrevious = document.querySelector('.gallery button.prev');
+  const galleryNext = document.querySelector('.gallery button.next');
+
+  const next = () => {
+    galleryTrack.scrollBy({
+      left: galleryElements[0].scrollWidth,
+      behavior: 'smooth'
+    });
+  };
+
+  const prev = () => {
+    galleryTrack.scrollBy({
+      left: galleryElements[0].scrollWidth * -1,
+      behavior: 'smooth'
+    });
+  };
+
+  const progress = ({ target: { scrollLeft, scrollLeftMax } }) => {
+    galleryIndicator.style.width = `${(scrollLeft / scrollLeftMax) * 100}%`;
+  };
+
+  const isAtEnd = () => {
+    galleryTrack.scrollLeft === 0
+      ? (galleryPrevious.disabled = true)
+      : (galleryPrevious.disabled = false);
+    galleryTrack.scrollLeft === galleryTrack.scrollLeftMax
+      ? (galleryNext.disabled = true)
+      : (galleryNext.disabled = false);
+  };
+
+  galleryPrevious.addEventListener('click', prev);
+  galleryNext.addEventListener('click', next);
+  galleryTrack.addEventListener('scroll', progress);
+  galleryTrack.addEventListener('scroll', isAtEnd);
+  document.addEventListener('DOMContentLoaded', isAtEnd);
+</script>
+
+<div class="gallery">
+  <button class="prev"></button>
+  <button class="next"></button>
+
+  <div class="track">
+    <slot></slot>
+  </div>
+
+  <div class="indicator"></div>
+</div>
+
+<style>
+  .gallery {
+    display: grid;
+    grid-auto-columns: auto 1fr auto;
+    grid-template-areas:
+      'prev track next'
+      '. progress .';
+    align-items: center;
+    gap: 1em;
+
+    & .prev,
+    & .next {
+      position: relative;
+
+      grid-row: track;
+      display: grid;
+      place-content: center;
+
+      font-size: 1.25em;
+      color: var(--clr-text);
+
+      width: 0;
+      height: 0;
+
+      cursor: pointer;
+
+      background-color: var(--clr-box-background);
+
+      border: var(--border-thin) solid var(--clr-text);
+      border-radius: 100%;
+      padding: 0.75em;
+
+      z-index: 1;
+
+      @media (min-width: 32em) {
+        font-size: 1.25em;
+      }
+
+      &::after {
+        position: absolute;
+        inset: 0;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+
+    & .prev {
+      grid-column: prev;
+      margin-inline: 0.75em 0;
+
+      &::after {
+        content: '«' / 'Previous';
+      }
+    }
+
+    & .next {
+      grid-column: next;
+      margin-inline: 0 0.75em;
+
+      &::after {
+        content: '»' / 'Next';
+      }
+    }
+
+    & .track {
+      grid-row: track;
+      grid-column: prev / next;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 100%;
+      gap: 2em;
+
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+
+      & > * {
+        margin-block: 0.25em 0;
+        scroll-snap-align: center;
+      }
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    & .ref-image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    & .indicator {
+      grid-row: track;
+      grid-column: prev / next;
+      place-self: start;
+
+      height: 0.25em;
+      width: 1em;
+      min-width: 1em;
+
+      background-color: var(--clr-gallery-indicator);
+
+      z-index: 1;
+
+      transition: width 0.4s ease-in-out 0.1s;
+    }
+  }
+</style>

src/css/colors.css

@@ -48,6 +48,7 @@
   --clr-heading-data: var(--clr-accent-1);
   --clr-link: var(--clr-accent-1);
   --clr-link-underline: var(--clr-accent-1);
+  --clr-gallery-indicator: var(--clr-accent-1);
 }
 
 .viktor {
@@ -67,6 +68,7 @@
   --clr-link: var(--clr-accent-7);
   --clr-link-underline: var(--clr-accent-7);
   --clr-timeline-stroke: var(--clr-accent-7);
+  --clr-gallery-indicator: var(--clr-accent-7);
 }
 
 .jarek {
@@ -81,4 +83,5 @@
   --clr-heading-data: var(--clr-accent-1);
   --clr-link: var(--clr-accent-1);
   --clr-link-underline: var(--clr-accent-1);
+  --clr-gallery-indicator: var(--clr-accent-1);
 }