Editorial 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 AccordionEditorialItem {
12  id: string;
13  title: string;
14  content: string;
15}
16 
17export interface AccordionEditorialProps {
18  items?: AccordionEditorialItem[];
19  defaultValue?: string;
20  value?: string;
21  onValueChange?: (value: string) => void;
22  collapsible?: boolean;
23  className?: string;
24}
25 
26const defaultItems: AccordionEditorialItem[] = [
27  {
28    id: "clarity",
29    title: "Clarity over cleverness",
30    content:
31      "The best interfaces disappear. Every label, every spacing decision, every transition serves comprehension first. When something feels obvious, that\u2019s the result of invisible design work \u2014 not the absence of it.",
32  },
33  {
34    id: "rhythm",
35    title: "Rhythm in repetition",
36    content:
37      "Consistency isn\u2019t uniformity. A four-pixel grid, a limited type scale, a shared motion curve \u2014 these constraints create a visual rhythm users feel before they notice. The system breathes when the rules are right.",
38  },
39  {
40    id: "restraint",
41    title: "The discipline of restraint",
42    content:
43      "Removing the last unnecessary element is harder than adding the first. Restraint means questioning every border, every shadow, every color that doesn\u2019t earn its place. What remains carries more weight.",
44  },
45  {
46    id: "materiality",
47    title: "Digital materiality",
48    content:
49      "Screens have physics \u2014 not literal, but felt. A button that depresses, a card that lifts, a list that settles. These micro-responses create trust. The interface becomes a surface you can rely on.",
50  },
51  {
52    id: "craft",
53    title: "Craft at every scale",
54    content:
55      "The gap between good and great lives in the details nobody asked for. A hover state that eases perfectly. A loading skeleton that matches the content layout. Craft compounds when nobody is cutting corners.",
56  },
57];
58 
59export default function AccordionEditorial({
60  items = defaultItems,
61  defaultValue = "restraint",
62  value,
63  onValueChange,
64  collapsible = true,
65  className,
66}: AccordionEditorialProps) {
67  return (
68    <div className={cn("mx-auto w-full max-w-xl", className)}>
69      <Accordion
70        type="single"
71        defaultValue={value ? undefined : defaultValue}
72        value={value}
73        onValueChange={onValueChange}
74        collapsible={collapsible}
75      >
76// … truncated