feat: implement barebone zola templates

_src/components/Carousel/Carousel.module.css

@@ -0,0 +1,49 @@
+.carousel {
+  height: 100%;
+  max-width: 90%;
+  margin: auto;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.container {
+  height: 100%;
+  overflow: hidden;
+}
+
+.content {
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  transition: transform 0.6s ease;
+}
+
+.item {
+  height: 100%;
+  width: 100%;
+  flex: 0 0 100%;
+}
+
+.itemContent {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnPrev,
+.btnNext {
+  top: 50%;
+  z-index: 10;
+}
+
+.btnPrev {
+  left: 0;
+}
+
+.btnNext {
+  right: 0;
+}

_src/components/Carousel/Carousel.tsx

@@ -0,0 +1,66 @@
+import React, { Children, useEffect, useRef, useState } from 'react';
+import classes from './Carousel.module.css';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Carousel({ children }: Props): JSX.Element {
+  const [activeItem, setActiveItem] = useState(0);
+  const content = useRef<HTMLDivElement>(null);
+  const maxItems = Children.count(children) - 1;
+
+  useEffect(() => {
+    if (content.current == null) return;
+
+    const offset = content.current.clientWidth * activeItem;
+    // const offset = 100 * activeItem;
+    //
+    console.log(offset, activeItem, content.current.clientWidth);
+
+    content.current.style.transform = `translate3d(-${offset}px, 0px, 0px)`;
+  }, [activeItem]);
+
+  const offsetActiveItem = (offset: number): void => {
+    setActiveItem((prev) => {
+      const newActiveItem = prev + offset;
+
+      // Wrap on end in both sides
+      if (newActiveItem < 0) {
+        return maxItems;
+      }
+
+      if (newActiveItem > maxItems) {
+        return 0;
+      }
+
+      return newActiveItem;
+    });
+  };
+
+  return (
+    <div className={classes.carousel}>
+      <button
+        className={classes.btnPrev}
+        onClick={() => {
+          offsetActiveItem(-1);
+        }}
+      >
+        Prev
+      </button>
+      <div className={classes.container}>
+        <div ref={content} className={classes.content}>
+          {children}
+        </div>
+      </div>
+      <button
+        className={classes.btnNext}
+        onClick={() => {
+          offsetActiveItem(1);
+        }}
+      >
+        Next
+      </button>
+    </div>
+  );
+}

_src/components/Carousel/CarouselItem.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import classes from './Carousel.module.css';
+
+interface Props {
+  children: JSX.Element | JSX.Element[];
+}
+
+export default function CarouselItem({ children }: Props): JSX.Element {
+  return (
+    <div className={classes.item}>
+      <div className={classes.itemContent}>{children}</div>
+    </div>
+  );
+}