feat: add projects previews

app/components/IconWithText.tsx

@@ -4,6 +4,7 @@ type IconWithTextProps = {
   desc: string;
   backgroundColor?: string | null;
   backgroundOpacity?: string | null;
+  isGroup?: boolean;
 };
 
 export const IconWithText = ({
@@ -12,10 +13,15 @@ export const IconWithText = ({
   desc,
   backgroundColor,
   backgroundOpacity,
+  isGroup,
 }: IconWithTextProps) => {
   return (
     <div
-      className={`flex items-start gap-1 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] hover:scale-105 duration-100 ease-in-out`}
+      className={`flex items-start gap-1 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] ${
+        !isGroup
+          ? "hover:scale-105"
+          : "group-hover:scale-105"
+      } duration-100 ease-in-out`}
       style={
         {
           "--bg-color": backgroundColor || "#161213",

app/components/Photos.Carousel.tsx

@@ -1,5 +1,3 @@
-import Styles from "./Photos.Carousel.module.css";
-
 import React, { useCallback, useEffect, useRef } from "react";
 import {
   EmblaCarouselType,

app/components/ProjectLink.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+
+import Link from "next/link";
+import { IconWithText } from "../components/IconWithText";
+import { useEffect, useRef, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import { useInView } from "motion/react";
+
+type ProjectLinkProps = {
+  icon: string;
+  text: string;
+  desc: string;
+  url: string;
+  preview: string[];
+};
+
+export const ProjectLink = ({
+  icon,
+  text,
+  desc,
+  url,
+  preview,
+}: ProjectLinkProps) => {
+  const [shouldUseCarousel] = useState(preview ? preview.length > 1 : false);
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
+    Autoplay({ delay: 5000, playOnInit: false }),
+  ]);
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+
+  useEffect(() => {
+    if (!shouldUseCarousel) return;
+    if (!emblaApi) return;
+
+    const autoplay = emblaApi?.plugins()?.autoplay;
+    if (!autoplay) return;
+
+    if (!isInView) {
+      autoplay.stop();
+    } else {
+      autoplay.play();
+    }
+  }, [shouldUseCarousel, emblaApi, isInView]);
+
+  return (
+    <Link href={url} key={`projects.link.${text}`} className="relative group">
+      <div className="px-2 overflow-hidden">
+        {shouldUseCarousel ? (
+          <div className="embla embla--projects" ref={ref}>
+            <div className="embla__viewport" ref={emblaRef}>
+              <div className="embla__container">
+                {preview.map((item, index) => (
+                  <div
+                    className="embla__slide"
+                    key={`embla.project.${text}.slide.${index}`}
+                  >
+                    <img
+                      className="embla__slide__img rounded-xl! border-white/5 border-1 group-hover:scale-105 duration-100 ease-in-out origin-bottom"
+                      src={item}
+                      alt=""
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <img
+            src={preview?.[0] || "/images/projects/no-preview.png"}
+            alt={text}
+            className="w-full aspect-video object-cover rounded-xl border-white/5 border-1 group-hover:scale-105 duration-100 ease-in-out origin-bottom "
+          />
+        )}
+      </div>
+      <div className="absolute bottom-0 left-0 right-0">
+        <IconWithText
+          icon={icon}
+          text={text}
+          desc={desc}
+          backgroundColor={"#101316"}
+          backgroundOpacity={"100%"}
+          isGroup={true}
+        />
+      </div>
+    </Link>
+  );
+};