FAQ accordion

import * as React from "react";
import { ChevronDownIcon } from "lucide-react";
import { cn } from "@/lib/utils";

type FaqItem = {
  /** The question. Plain text, it becomes the summary. */
  question: string;
  /** The answer. A string or your own element. */
  answer: React.ReactNode;
};

type FaqAccordionProps = React.ComponentProps<"div"> & {
  /** Questions in order. */
  items: FaqItem[];
  /** Give every item the same name so opening one closes the others. */
  name?: string;
  /** Index of an item that starts open. */
  defaultOpen?: number;
};

/**
 * A single list of questions. Each item is a native details and summary pair, so the disclosure
 * semantics, keyboard and find in page come from the browser. No JavaScript, server component.
 */
export function FaqAccordion({ items, name, defaultOpen, className, ...props }: FaqAccordionProps) {
  return (
    <div data-slot="faq-accordion" className={cn("w-full divide-y rounded-lg border bg-card", className)} {...props}>
      {items.map((item, i) => (
        <details key={item.question} name={name} open={i === defaultOpen} className="group/faq">
          <summary className="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3 text-sm font-medium text-foreground outline-none select-none hover:bg-accent/40 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-inset [&::-webkit-details-marker]:hidden">
            {item.question}
            <ChevronDownIcon
              className="size-4 shrink-0 text-muted-foreground transition-transform duration-150 group-open/faq:rotate-180 motion-reduce:transition-none"
              aria-hidden="true"
            />
          </summary>
          <div className="px-4 pb-4 text-sm text-muted-foreground">{item.answer}</div>
        </details>
      ))}
    </div>
  );
}

export type { FaqItem };