Indexed Accordion

1"use client";
2 
3import {
4  Accordion,
5  AccordionContent,
6  AccordionItem,
7  AccordionTrigger,
8} from "@/components/ui/accordion";
9import { cn } from "@/lib/utils";
10 
11export interface AccordionIndexedItem {
12  id: string;
13  title: string;
14  content: string;
15}
16 
17export interface AccordionIndexedProps {
18  items?: AccordionIndexedItem[];
19  defaultValue?: string;
20  value?: string;
21  onValueChange?: (value: string) => void;
22  collapsible?: boolean;
23  className?: string;
24}
25 
26const defaultItems: AccordionIndexedItem[] = [
27  {
28    id: "strategy",
29    title: "Strategy",
30    content:
31      "Every product starts with a question worth answering. We map user needs, business goals, and technical constraints into a focused direction before a single pixel is placed.",
32  },
33  {
34    id: "design",
35    title: "Design",
36    content:
37      "Interface decisions shaped by real usage patterns. Typography, spacing, and color are tuned until the experience feels inevitable rather than designed.",
38  },
39  {
40    id: "engineering",
41    title: "Engineering",
42    content:
43      "Components built for composition, not configuration. Server-first rendering, edge delivery, and zero-layout-shift interactions ship as defaults.",
44  },
45  {
46    id: "motion",
47    title: "Motion",
48    content:
49      "Animation as communication. Spring physics for direct manipulation, opacity curves for state transitions, and layout animations that preserve spatial context.",
50  },
51  {
52    id: "systems",
53    title: "Systems",
54    content:
55      "Tokens, primitives, and patterns that scale across surfaces. A single source of truth that keeps twenty screens consistent without slowing down any of them.",
56  },
57  {
58    id: "delivery",
59    title: "Delivery",
60    content:
61      "Incremental rollouts behind feature flags, performance budgets enforced in CI, and lighthouse scores that never regress. Production is the only environment that matters.",
62  },
63];
64 
65export default function AccordionIndexed({
66  items = defaultItems,
67  defaultValue = "engineering",
68  value,
69  onValueChange,
70  collapsible = true,
71  className,
72}: AccordionIndexedProps) {
73  return (
74    <div className={cn("mx-auto w-full max-w-lg", className)}>
75      <Accordion
76        type="single"
77        defaultValue={value ? undefined : defaultValue}
78        value={value}
79        onValueChange={onValueChange}
80        collapsible={collapsible}
81      >
82        {items.map((item, index) => (
83          <AccordionItem
84            value={item.id}
85            key={item.id}
86// … truncated