feat: Implement carousel component with mock data

package.json

@@ -14,17 +14,18 @@
     "check:fix": "biome check --write --unsafe"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-tabs": "^1.1.13",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-table": "^8.21.3",
     "babel-plugin-react-compiler": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
+    "embla-carousel-react": "^8.6.0",
     "geist": "^1.5.1",
     "next": "^15.5.15",
     "next-themes": "^0.4.6",

src/app/page.tsx

@@ -4,6 +4,7 @@ import discord from "@/assets/icons/discord.svg"
 import telegram from "@/assets/icons/telegram.svg"
 import { CardMultipleIcons } from "@/components/card-multiple-icons"
 import { AboutUs } from "@/components/home/about-us"
+import { CarouselMock } from "@/components/home/carousel-mock"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
 
@@ -12,6 +13,8 @@ export default function Home() {
     <main className="w-full">
       <Hero />
       <Materials />
+      {/* TODO: delete this when merging */}
+      <CarouselMock />
       <AboutUs />
       <div className="mx-auto w-fit py-12">
         <CardMultipleIcons

src/components/home/carousel-mock.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { CardCaption } from "@/components/card-caption"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
+
+const mockCards = [
+  {
+    title: "WeBeepSync",
+    caption:
+      "WeBeep Sync è una semplice app, user-friendly e senza compromessi che serve per tenere sincronizzati tutti i tuoi file di WeBeep.",
+  },
+  {
+    title: "PolimiSchedule",
+    caption:
+      "Genera un file iCalendar (.ics) a partire dal formato testuale dell’Orario delle lezioni. Possibilità di importare su Google Calendar.",
+  },
+  {
+    title: "WiFiLinux",
+    caption: "Scarica ed esegui lo script Python per attivare la connessione permanente al WiFi Polimi.",
+  },
+  {
+    title: "The TOL Project",
+    caption: "Un simulatore gratuito del test di ammissione per le aspiranti matricole di Ingegneria del PoliMi.",
+  },
+] as const
+
+// TODO: delete this when merging
+export function CarouselMock() {
+  return (
+    <section className="mx-auto flex min-h-screen w-full max-w-4xl flex-col items-center justify-center gap-16 px-7.5">
+      <h1 className="typo-headline-medium sm:typo-display-large bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
+        PoliNetwork
+      </h1>
+
+      <Carousel className="w-full">
+        <CarouselContent>
+          {mockCards.map((card) => (
+            <CarouselItem key={card.title}>
+              <div className="flex justify-center">
+                <CardCaption {...card} />
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselDots className="mt-8" />
+      </Carousel>
+    </section>
+  )
+}

src/components/ui/carousel.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  selectedIndex: number
+  scrollSnaps: number[]
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+    setSelectedIndex(api.selectedScrollSnap())
+    setScrollSnaps(api.scrollSnapList())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (orientation === "vertical") {
+        if (event.key === "ArrowUp") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowDown") {
+          event.preventDefault()
+          scrollNext()
+        }
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [orientation, scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api.off("reInit", onSelect)
+      api.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps,
+      }}
+    >
+      <section onKeyDownCapture={handleKeyDown} className={cn("relative", className)} data-slot="carousel" {...props}>
+        {children}
+      </section>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
+      <div className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props} />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"fieldset">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <fieldset
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+      {...props}
+    />
+  )
+}
+
+function CarouselDots({ className, ...props }: React.ComponentProps<"div">) {
+  const { api, scrollSnaps, selectedIndex } = useCarousel()
+
+  if (scrollSnaps.length <= 1) return null
+
+  return (
+    <div data-slot="carousel-dots" className={cn("flex items-center justify-center gap-3", className)} {...props}>
+      {scrollSnaps.map((scrollSnap, index) => (
+        <Button
+          key={scrollSnap}
+          type="button"
+          aria-label={`Go to slide ${index + 1}`}
+          aria-current={selectedIndex === index}
+          onClick={() => api?.scrollTo(index)}
+          className={cn(
+            "flex size-5 appearance-none items-center justify-center rounded-full bg-transparent p-0 outline-none transition-colors"
+          )}
+        >
+          <span
+            className={cn(
+              "block size-3 rounded-full transition-colors",
+              selectedIndex === index ? "bg-white/95" : "bg-white/20"
+            )}
+          />
+          <span className="sr-only">{`Slide ${index + 1}`}</span>
+        </Button>
+      ))}
+    </div>
+  )
+}
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselDots, CarouselItem }