Basic Accordion

1"use client";
2 
3import { ChevronDown } from "lucide-react";
4import { motion, useReducedMotion } from "motion/react";
5import { useState } from "react";
6 
7const CHEVRON_ROTATION_DEGREES = 180;
8const CHEVRON_ANIMATION_DURATION = 0.2;
9 
10export interface AccordionItem {
11  content: React.ReactNode;
12  id: string | number;
13  title: string;
14}
15 
16export interface BasicAccordionProps {
17  allowMultiple?: boolean;
18  className?: string;
19  defaultExpandedIds?: Array<string | number>;
20  items: AccordionItem[];
21}
22 
23export default function BasicAccordion({
24  items,
25  allowMultiple = false,
26  className = "",
27  defaultExpandedIds = [],
28}: BasicAccordionProps) {
29  const [expandedItems, setExpandedItems] =
30    useState<Array<string | number>>(defaultExpandedIds);
31  const shouldReduceMotion = useReducedMotion();
32 
33  const toggleItem = (id: string | number) => {
34    if (expandedItems.includes(id)) {
35      setExpandedItems(expandedItems.filter((item) => item !== id));
36    } else if (allowMultiple) {
37      setExpandedItems([...expandedItems, id]);
38    } else {
39      setExpandedItems([id]);
40    }
41  };
42 
43  return (
44    <div
45      className={`flex w-full flex-col divide-y divide-border overflow-hidden rounded-lg border ${className}`}
46    >
47      {items.map((item) => {
48        const isExpanded = expandedItems.includes(item.id);
49 
50        return (
51          <div className="overflow-hidden" key={item.id}>
52            <button
53              aria-controls={`accordion-content-${item.id}`}
54              aria-expanded={isExpanded}
55              className="flex min-h-[44px] w-full cursor-pointer items-center justify-between gap-2 bg-background px-4 py-3 text-left transition-colors hover:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
56              id={`accordion-header-${item.id}`}
57              onClick={() => toggleItem(item.id)}
58              type="button"
59            >
60              <h3 className="font-medium">{item.title}</h3>
61              <motion.div
62                animate={{ rotate: isExpanded ? CHEVRON_ROTATION_DEGREES : 0 }}
63                className="shrink-0"
64                transition={{
65                  duration: shouldReduceMotion ? 0 : CHEVRON_ANIMATION_DURATION,
66                }}
67              >
68                <ChevronDown className="h-5 w-5" />
69              </motion.div>
70            </button>
71 
72            {/* Content stays mounted (height-animated, not unmounted) so the
73// … truncated