Accordion Nova

1"use client";
2 
3import * as 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 Information",
12    description:
13      "Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.",
14  },
15  {
16    title: "Product Information",
17    description:
18      "Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.",
19  },
20  {
21    title: "Product Information",
22    description:
23      "Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.",
24  },
25  {
26    title: "Product Information",
27    description:
28      "Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.",
29  },
30];
31 
32export default function AccordionDemo({options=demoOptions}) {
33  const [openIndex, setOpenIndex] = React.useState(0);
34 
35  return (
36    <Accordion
37      type="single"
38      collapsible
39      value={`item-${openIndex}`}
40      onValueChange={(val) => {
41        setOpenIndex(val ? parseInt(val.split("-")[1]) : null);
42      }}
43      className="w-full"
44    >
45      {options.map((item, i) => {
46        const isAboveOpen = openIndex === i - 1;
47        const isBelowOpen = openIndex === i + 1;
48 
49        return (
50          <AccordionItem
51            key={i}
52            value={`item-${i}`}
53            className={cn(
54              isAboveOpen && "border-t rounded-t-2xl",
55              isBelowOpen && "border-b rounded-b-2xl",
56              "border-white/20 hover:bg-zinc-700/20 transition-all duration-300 px-3"
57            )}
58          >
59            <AccordionTrigger className='text-lg font-medium'>{item.title}</AccordionTrigger>
60            <AccordionContent className="text-base">{item.description}</AccordionContent>
61          </AccordionItem>
62        );
63      })}
64    </Accordion>
65  );
66}
67 
68const Accordion = AccordionPrimitive.Root;
69 
70const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
71  <AccordionPrimitive.Item
72    ref={ref}
73    className={cn(
74      "hover:cursor-pointer transition-all",
75// … truncated