Accordion Lyra

1"use client";
2 
3import React from "react";
4import * as AccordionPrimitive from "@radix-ui/react-accordion";
5import { ChevronDown } from "lucide-react";
6import { motion } from "framer-motion";
7import { cn } from "@/lib/utils";
8 
9const demoOptions = [
10  {
11    title: "Product Overview",
12    description:
13      "Discover our latest innovation designed for efficiency and comfort. Engineered with precision to deliver top-tier performance in any environment.",
14  },
15  {
16    title: "Specifications",
17    description:
18      "Crafted with aerospace-grade aluminum, powered by a next-gen processor, and equipped with a long-lasting lithium battery for uninterrupted use.",
19  },
20  {
21    title: "Warranty & Support",
22    description:
23      "All purchases include a 2-year limited warranty and lifetime technical support. Extended protection plans are also available.",
24  },
25];
26 
27export default function AccordionDemo() {
28  const [openIndex, setOpenIndex] = React.useState(0);
29 
30  return (
31    <Accordion
32      type="single"
33      collapsible
34      value={openIndex !== null ? `item-${openIndex}` : ""}
35      onValueChange={(val) => {
36        setOpenIndex(val ? parseInt(val.split("-")[1]) : null);
37      }}
38      className="w-full"
39    >
40      {demoOptions.map((item, i) => {
41        const isAboveOpen = openIndex === i - 1;
42        const isBelowOpen = openIndex === i + 1;
43        const isActive = openIndex === i;
44 
45        return (
46          <AccordionItem
47            key={i}
48            value={`item-${i}`}
49            className={cn(
50              openIndex !== null && isAboveOpen && "border-t",
51              openIndex !== null && isBelowOpen && "border-b",
52              "border-white/20 hover:bg-white/5 transition-all duration-300 px-0 bg-black/40 backdrop-blur-sm"
53            )}
54          >
55            <AccordionTrigger className="px-4 text-white hover:text-white transition-all duration-300 font-mono text-sm uppercase tracking-wider group">
56              {item.title}
57            </AccordionTrigger>
58            <AccordionPrimitive.Content forceMount asChild>
59              <motion.div
60                initial={false}
61                animate={{
62                  height: isActive ? "auto" : 0,
63                  opacity: isActive ? 1 : 0,
64                }}
65                transition={{
66                  height: {
67                    duration: 0.5,
68                    type: "spring",
69                    bounce: 0.3,
70                  },
71                  opacity: {
72// … truncated