add containcorp images

Author: KurtGokhan

package-lock.json

@@ -32,6 +32,8 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "debounce": "^1.2.1",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "ga-lite": "2.1.4",
     "github-slugger": "^1.3.0",
     "next": "12.3.2-canary.7",
@@ -48,6 +50,7 @@
     "@babel/core": "^7.20.12",
     "@babel/plugin-transform-modules-commonjs": "^7.20.11",
     "@babel/preset-react": "^7.18.6",
+    "@lezer/javascript": "0.15.2",
     "@mdx-js/mdx": "^2.2.1",
     "@types/babel__standalone": "^7.1.4",
     "@types/body-scroll-lock": "^3.1.0",
@@ -100,8 +103,7 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.5",
     "unist-util-visit": "^2.0.3",
-    "webpack-bundle-analyzer": "^4.7.0",
-    "@lezer/javascript": "0.15.2"
+    "webpack-bundle-analyzer": "^4.7.0"
   },
   "overrides": {
     "@lezer/javascript": "0.15.2"
@@ -115,4 +117,4 @@
     "*.{js,ts,jsx,tsx,css}": "npm run prettier",
     "src/**/*.md": "npm run fix-headings"
   }
-}
+}

package.json

@@ -0,0 +1,65 @@
+'use client';
+
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Children, PropsWithChildren, ReactElement, cloneElement, useCallback } from 'react';
+import styles from './MDXComponents.module.css';
+
+export function EmblaCarousel({ children }: PropsWithChildren) {
+  const items =
+    (Children.map(children, (child, index) => (typeof child === 'string' && !child.trim() ? null : child))?.filter(
+      Boolean,
+    ) as ReactElement[]) ?? [];
+
+  const slides = items.map((child, index) =>
+    typeof child === 'object' && child.type === 'video' ? (
+      cloneElement(child, { controls: true, autoPlay: true })
+    ) : (
+      <div className={styles.emblaSlide} key={index}>
+        {child}
+      </div>
+    ),
+  );
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({}, [
+    Autoplay({
+      delay: (x, api) => {
+        return api.slideNodes().map((x) => (x.tagName === 'VIDEO' ? 10000 : 3000));
+      },
+      stopOnInteraction: true,
+    }),
+  ]);
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev();
+  }, [emblaApi]);
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext();
+  }, [emblaApi]);
+
+  return (
+    <div className={styles.carousel}>
+      <div className={styles.embla}>
+        <div className={styles.emblaViewport} ref={emblaRef}>
+          <div className={styles.emblaContainer}>{slides}</div>
+        </div>
+
+        <button className={styles.emblaPrev} onClick={scrollPrev}>
+          Prev
+        </button>
+        <button className={styles.emblaNext} onClick={scrollNext}>
+          Next
+        </button>
+      </div>
+
+      <div className={styles.thumbnails}>
+        {items.map((child, index) => (
+          <div className={styles.thumbnail} key={index} onClick={() => emblaApi?.scrollTo(index)}>
+            {child}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

public/images/showcase/containcorp/21-05-2025_19-53-14.webp

@@ -41,3 +41,88 @@
 .markdown a {
   @apply inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal;
 }
+
+.embla {
+  position: relative;
+}
+.emblaViewport {
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+}
+.emblaContainer {
+  display: flex;
+  height: 100%;
+}
+.emblaSlide {
+  flex: 0 0 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.emblaPrev,
+.emblaNext {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 0;
+  color: transparent;
+}
+
+.emblaPrev:before,
+.emblaNext:before {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid black;
+  border-radius: 3px;
+  rotate: 45deg;
+}
+
+.emblaPrev {
+  left: 10px;
+}
+.emblaPrev:before {
+  border-color: transparent transparent black black;
+}
+.emblaNext:before {
+  border-color: black black transparent transparent;
+}
+
+.emblaNext {
+  right: 10px;
+}
+
+.carousel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.thumbnails {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.thumbnail {
+  width: 100px;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  overflow: hidden;
+}