Image Accordion

1"use client";
2 
3import * as React from "react";
4 
5export type ImageAccordionPanel = {
6  /** Background image URL. */
7  image: string;
8  /** Panel title, shown in full when the panel is active. */
9  title: string;
10  /** Optional supporting line, revealed when the panel is active. */
11  description?: string;
12  /** Optional link — turns the panel into an anchor. */
13  href?: string;
14};
15 
16export type ImageAccordionProps = Omit<
17  React.HTMLAttributes<HTMLDivElement>,
18  "children"
19> & {
20  /** Panels, left to right. Provide 3–6 for the best effect. */
21  panels: ImageAccordionPanel[];
22  /** Index of the panel open by default. */
23  defaultIndex?: number;
24  /** How much wider the active panel grows relative to the others. */
25  activeGrow?: number;
26  /** Height of the accordion (any CSS length). */
27  height?: string;
28};
29 
30const ImageAccordion = React.forwardRef<HTMLDivElement, ImageAccordionProps>(
31  (
32    {
33      panels,
34      defaultIndex = 0,
35      activeGrow = 5,
36      height = "26rem",
37      className,
38      style,
39      ...props
40    },
41    forwardedRef,
42  ) => {
43    const ref = React.useRef<HTMLDivElement>(null);
44    React.useImperativeHandle(
45      forwardedRef,
46      () => ref.current as HTMLDivElement,
47    );
48    const [active, setActive] = React.useState(defaultIndex);
49 
50    return (
51      <div
52        ref={ref}
53        data-slot="image-accordion"
54        className={`flex flex-col gap-2 overflow-hidden sm:flex-row ${className ?? ""}`}
55        style={{ height, ...style }}
56        onPointerLeave={() => setActive(defaultIndex)}
57        {...props}
58      >
59        {panels.map((panel, i) => {
60          const isActive = i === active;
61          const Tag = panel.href ? "a" : "button";
62          return (
63            <Tag
64              // biome-ignore lint/suspicious/noArrayIndexKey: panels are a fixed ordered set
65              key={i}
66              {...(panel.href
67                ? { href: panel.href }
68                : { type: "button" as const })}
69              data-active={isActive}
70              aria-expanded={isActive}
71              onPointerEnter={() => setActive(i)}
72              onClick={() => setActive(i)}
73              onFocus={() => setActive(i)}
74              className="group relative block min-h-[3rem] min-w-0 overflow-hidden rounded-2xl text-left [transition:flex-grow_550ms_cubic-bezier(0.22,1,0.36,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none sm:min-h-0 sm:min-w-[2rem]"
75// … truncated