Photo Tabs

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 { motion, useReducedMotion, type Transition } from "motion/react";
import { cn } from "@/lib/utils";

/*
 * Photo Tabs — the photos are the tabs: the chosen one takes a fixed share of the strip, the others share the rest, and
 * the panel beside them cross-fades to what the chosen photo stands for (from the Ciketo testimonials). A column from
 * 768px up, a row below. Click only. Framer's spring: bounce 0, 0.4s, on the sizes and on the fade.
 *
 * It is the mirror of `expanding-panels`, where the chosen one is the flexible one and the rest are fixed, and the
 * other way round from `step-sequence`, where text steps drive a media panel. It fits testimonials, team and products.
 *
 * The sizes are flex-basis in percent along the strip's main axis, which is the height in the column and the width in
 * the row — so one value is right in both, with no breakpoint logic in JavaScript (which would be a hydration trap).
 *
 * Improvements over Ciketo: a real tab list (arrow keys, Home and End), panels that are not shown are inert as well as
 * aria-hidden, and the strip keeps the quote that the port already fixed (Framer switched it on desktops only).
 * Reduced motion is a zero-duration transition: flex sizes are not a transform, so MotionConfig would not skip them.
 */

const spring: Transition = { type: "spring", bounce: 0, duration: 0.4 };

export type PhotoTab = {
  value: string;
  /** What the tab is called to assistive technology — the person's name, say. The photo itself is decorative. */
  label: string;
  /** The photo. It is stretched and cropped to its tab. */
  media: React.ReactNode;
  /** What shows beside the photos while this tab is chosen. */
  panel: React.ReactNode;
};

export type PhotoTabsProps = {
  items: PhotoTab[];
  value?: string;
  /** The tab that starts chosen; the first by default. */
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Accessible name of the tab list. */
  label: string;
  /** How much of the strip the chosen photo takes, in percent. */
  selectedShare?: number;
  /** Height of the photo column from 768px up, in px. */
  height?: number;
  /** Width of the photo column from 768px up, in px. */
  thumbWidth?: number;
  className?: string;
};

export function PhotoTabs({
  items,
  value,
  defaultValue,
  onValueChange,
  label,
  selectedShare = 55,
  height = 480,
  thumbWidth = 168,
  className,
}: PhotoTabsProps) {
  const [internal, setInternal] = React.useState(defaultValue ?? items[0]?.value);
  const active = value ?? internal;
  const index = Math.max(0, items.findIndex((item) => item.value === active));
  const reduce = Boolean(useReducedMotion());
  const id = React.useId();
  const tabs = React.useRef<(HTMLButtonElement | null)[]>([]);
  const transition = reduce ? { duration: 0 } : spring;

  function select(next: string) {
    if (next === active) return;
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  }

  function onKeyDown(event: React.KeyboardEvent) {
    const last = items.length - 1;
    let next: number | undefined;
    if (event.key === "ArrowDown" || event.key === "ArrowRight") next = index === last ? 0 : index + 1;
    else if (event.key === "ArrowUp" || event.key === "ArrowLeft") next = index === 0 ? last : index - 1;
    else if (event.key === "Home") next = 0;
    else if (event.key === "End") next = last;
    if (next === undefined) return;
    event.preventDefault();
    select(items[next].value);
    tabs.current[next]?.focus();
  }

  return (
    <div
      style={{ ["--tabs-h" as string]: `${height}px`, ["--tabs-w" as string]: `${thumbWidth}px` }}
      className={cn("flex w-full flex-col gap-6 md:flex-row md:gap-10", className)}
    >
      <div
        role="tablist"
        aria-label={label}
        className="flex h-40 gap-2.5 md:h-(--tabs-h) md:w-(--tabs-w) md:shrink-0 md:flex-col"
      >
        {items.map((item, i) => {
          const selected = i === index;
          return (
            <motion.button
              key={item.value}
              ref={(element) => {
                tabs.current[i] = element;
              }}
              type="button"
              role="tab"
              id={`${id}-tab-${i}`}
              aria-selected={selected}
              aria-controls={`${id}-panel`}
              aria-label={item.label}
              tabIndex={selected ? 0 : -1}
              onClick={() => select(item.value)}
              onKeyDown={onKeyDown}
              initial={false}
              animate={{ flexGrow: selected ? 0 : 1, flexBasis: selected ? `${selectedShare}%` : "0%" }}
              transition={transition}
              className="relative min-h-0 min-w-0 cursor-pointer overflow-hidden rounded-lg bg-muted outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>*]:size-full [&>*]:object-cover"
            >
              {item.media}
            </motion.button>
          );
        })}
      </div>

      {/* Every panel sits in the same grid cell, so the tallest one sets the height and nothing jumps. */}
      <div
        role="tabpanel"
        id={`${id}-panel`}
        aria-labelledby={`${id}-tab-${index}`}
        className="grid min-w-0 flex-1 [&>*]:col-start-1 [&>*]:row-start-1"
      >
        {items.map((item, i) => (
          <motion.div
            key={item.value}
            inert={i !== index}
            aria-hidden={i !== index}
            initial={false}
            animate={{ opacity: i === index ? 1 : 0 }}
            transition={transition}
          >
            {item.panel}
          </motion.div>
        ))}
      </div>
    </div>
  );
}