Accordion Retro

1"use client";
2 
3import * as React from "react";
4import * as AccordionPrimitive from "@radix-ui/react-accordion";
5import { Plus, Minus } from "lucide-react";
6import { motion } from "motion/react";
7import { cn } from "@/lib/utils";
8 
9const demoOptions = [
10  {
11    title: "SYSTEM_OVERVIEW",
12    description: "Core processing unit initialized.",
13  },
14  {
15    title: "TECHNICAL_SPECS",
16    description: "Architecture: 64-bit retro-grid.",
17  },
18];
19 
20const AccordionRetro = AccordionPrimitive.Root;
21 
22const AccordionItemRetro = React.forwardRef(({ className, ...props }, ref) => (
23  <AccordionPrimitive.Item
24    ref={ref}
25    className={cn(
26      "border-b-2 border-black last:border-b-2 first:border-t-2",
27      className
28    )}
29    {...props}
30  />
31));
32AccordionItemRetro.displayName = "AccordionItemRetro";
33 
34const AccordionTriggerRetro = React.forwardRef(
35  ({ className, children, ...props }, ref) => (
36    <AccordionPrimitive.Header className="flex">
37      <AccordionPrimitive.Trigger
38        ref={ref}
39        className={cn(
40          "flex flex-1 items-center justify-between py-4 text-base font-bold font-mono uppercase transition-all hover:bg-black hover:text-white px-4 group data-[state=open]:bg-black data-[state=open]:text-white",
41          className
42        )}
43        {...props}
44      >
45        {children}
46        <div className="relative w-4 h-4 flex items-center justify-center">
47             <Plus className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90 group-data-[state=open]:hidden" />
48             <Minus className="h-4 w-4 shrink-0 transition-transform duration-200 hidden group-data-[state=open]:block" />
49        </div>
50      </AccordionPrimitive.Trigger>
51    </AccordionPrimitive.Header>
52  )
53);
54AccordionTriggerRetro.displayName = AccordionPrimitive.Trigger.displayName;
55 
56const AccordionContentRetro = React.forwardRef(
57    ({ className, children, ...props }, ref) => {
58        const internalRef = React.useRef(null);
59        const [isOpen, setIsOpen] = React.useState(false);
60 
61        React.useEffect(() => {
62            const element = internalRef.current;
63            if (!element) return;
64 
65            const updateState = () => {
66                 const state = element.getAttribute("data-state");
67                 setIsOpen(state === "open");
68            };
69 
70            updateState();
71 
72            const observer = new MutationObserver((mutations) => {
73                mutations.forEach((mutation) => {
74// … truncated