ImageAccordion

"use client";

import { useState, type ReactNode } from "react";

export type ImageAccordionItem = {
  id: string;
  title: string;
  caption?: string;
  /** Your image, filling the panel. It sits inside a button, so no links here. */
  media: ReactNode;
};

type ImageAccordionProps = {
  items: ImageAccordionItem[];
  /** Index of the panel open at the start. */
  start?: number;
  /** How many times wider the open panel grows. */
  grow?: number;
  /** Set a height here. Panels sit side by side above 448px, stacked below. */
  className?: string;
};

/* ImageAccordion: a row of image slices. Hover, tap or tab to one and it opens wide while the others fold down. */
export function ImageAccordion({ items, start = 0, grow = 4, className = "h-80" }: ImageAccordionProps) {
  const [active, setActive] = useState(start);

  return (
    <div className={`@container ${className}`}>
      <div className="flex h-full flex-col gap-2 @md:flex-row">
        {items.map((item, i) => {
          const open = i === active;
          return (
            <button
              key={item.id}
              type="button"
              aria-expanded={open}
              onPointerEnter={(e) => e.pointerType === "mouse" && setActive(i)}
              onFocus={() => setActive(i)}
              onClick={() => setActive(i)}
              style={{ flexGrow: open ? grow : 1, flexBasis: 0 }}
              className="relative min-h-0 min-w-0 overflow-hidden rounded-2xl text-left text-white outline-none transition-[flex-grow] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] focus-visible:ring-2 focus-visible:ring-white/70 motion-reduce:transition-none"
            >
              <span className="absolute inset-0 block *:h-full *:w-full *:object-cover">{item.media}</span>
              <span className={`absolute inset-0 transition-colors duration-500 ${open ? "bg-black/25" : "bg-black/50"}`} />
              <span className={`absolute inset-0 grid place-items-center transition-opacity duration-300 ${open ? "opacity-0" : "opacity-100"}`}>
                <span className="truncate text-sm font-medium @md:[writing-mode:vertical-rl]">{item.title}</span>
              </span>
              <span className={`absolute bottom-0 left-0 block w-48 p-4 transition-opacity duration-300 ${open ? "opacity-100 delay-150" : "opacity-0"}`}>
                <span className="block font-semibold">{item.title}</span>
                {item.caption && <span className="mt-1 block text-xs text-white/85">{item.caption}</span>}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}