Slideshow

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { animate, motion, useInView, useMotionValue, type PanInfo, type Transition } from "motion/react";
import { cn } from "@/lib/utils";

/*
 * Slideshow — an endless carousel that auto-plays, can be dragged and peeks at the next slide
 * (from the Nitip "Slideshow"). Three copies of the items let it wrap without a visible seam.
 * Autoplay pauses while the slideshow is hovered, focused, dragged or scrolled out of view.
 * Arrow keys move one slide; the arrows sit at the bottom right.
 *
 * Size the slides with `slideClassName` (e.g. "w-[80%] sm:w-[45%]") and the spacing with `gap`.
 */

const slide: Transition = { type: "spring", stiffness: 200, damping: 40, mass: 1 };

export type SlideshowProps<T> = {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
  getKey: (item: T, index: number) => string;
  /** Accessible name of the carousel. */
  label: string;
  /** Milliseconds between slides; 0 turns autoplay off. */
  interval?: number;
  gap?: number;
  className?: string;
  slideClassName?: string;
};

function Arrow({ direction, onClick }: { direction: "left" | "right"; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={direction === "left" ? "Previous slide" : "Next slide"}
      className="grid size-8 cursor-pointer place-items-center rounded-full border bg-background/80 text-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
    >
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" className="size-4" aria-hidden>
        <path d={direction === "left" ? "M10 3.5L5.5 8l4.5 4.5" : "M6 3.5L10.5 8 6 12.5"} />
      </svg>
    </button>
  );
}

export function Slideshow<T>({
  items,
  renderItem,
  getKey,
  label,
  interval = 5000,
  gap = 16,
  className,
  slideClassName,
}: SlideshowProps<T>) {
  const count = items.length;
  const slides = [...items, ...items, ...items];

  const region = React.useRef<HTMLDivElement>(null);
  const track = React.useRef<HTMLDivElement>(null);
  const [index, setIndex] = React.useState(count);
  const [step, setStep] = React.useState(0);
  const [interacting, setInteracting] = React.useState(false);
  const [dragging, setDragging] = React.useState(false);
  const inView = useInView(region, { amount: 0.3 });
  const paused = interacting || dragging || !inView || interval === 0;
  const x = useMotionValue(0);

  React.useLayoutEffect(() => {
    const el = track.current;
    if (!el) return;
    const measure = () => {
      const first = el.children[0] as HTMLElement | undefined;
      if (first) setStep(first.offsetWidth + gap);
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(el);
    return () => observer.disconnect();
  }, [gap]);

  /* Animate to the current slide, then jump back to the middle copy when the loop runs off either end. */
  React.useEffect(() => {
    if (!step) return;
    const controls = animate(x, -index * step, slide);
    void controls.then(() => {
      if (index >= count * 2 || index < count) {
        const wrapped = index >= count * 2 ? index - count : index + count;
        x.jump(-wrapped * step);
        setIndex(wrapped);
      }
    });
    return () => controls.stop();
  }, [index, step, count, x]);

  React.useEffect(() => {
    if (paused) return;
    const timer = setTimeout(() => setIndex((i) => i + 1), interval);
    return () => clearTimeout(timer);
  }, [index, paused, interval]);

  function onDragEnd(_: PointerEvent, info: PanInfo) {
    setDragging(false);
    const swiped = Math.abs(info.offset.x) > step * 0.2 || Math.abs(info.velocity.x) > 500;
    if (swiped) setIndex((i) => i + (info.offset.x < 0 ? 1 : -1));
    else animate(x, -index * step, slide);
  }

  return (
    <div
      ref={region}
      role="region"
      aria-roledescription="carousel"
      aria-label={label}
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "ArrowRight") setIndex((i) => i + 1);
        if (e.key === "ArrowLeft") setIndex((i) => i - 1);
      }}
      onPointerEnter={(e) => e.pointerType === "mouse" && setInteracting(true)}
      onPointerLeave={() => setInteracting(false)}
      onFocus={() => setInteracting(true)}
      onBlur={() => setInteracting(false)}
      className={cn(
        "relative overflow-hidden rounded-lg outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
        className,
      )}
    >
      <motion.div
        ref={track}
        style={{ x, gap }}
        drag="x"
        dragMomentum={false}
        onDragStart={() => setDragging(true)}
        onDragEnd={onDragEnd}
        className="flex cursor-grab select-none active:cursor-grabbing"
      >
        {slides.map((item, i) => (
          <div key={`${getKey(item, i % count)}-${i}`} aria-hidden={i !== index} className={cn("shrink-0", slideClassName)}>
            {renderItem(item, i % count)}
          </div>
        ))}
      </motion.div>

      <div className="absolute right-3 bottom-3 flex gap-2">
        <Arrow direction="left" onClick={() => setIndex((i) => i - 1)} />
        <Arrow direction="right" onClick={() => setIndex((i) => i + 1)} />
      </div>
    </div>
  );
}