Plus Accordion

'use client';import { PlusIcon } from 'lucide-react';import * as AccordionPrimitive from '@radix-ui/react-accordion';import {  Accordion,  AccordionContent,  AccordionItem,} from '@/components/ui/accordion';import { cn } from '@/lib/utils';export type Accordion02Props = React.ComponentProps<typeof Accordion>;export const Accordion02 = ({ className, ...props }: Accordion02Props) => (  <Accordion className={cn('w-full', className)} {...props} />);export type Accordion02ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion02Item = ({ className, ...props }: Accordion02ItemProps) => (  <AccordionItem className={cn('py-2', className)} {...props} />);export type Accordion02HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion02Header = ({ className, ...props }: Accordion02HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion02TriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {  children: React.ReactNode;}export const Accordion02Trigger = ({ className, children, ...props }: Accordion02TriggerProps) => (  <AccordionPrimitive.Trigger     className={cn(      'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0',      className    )}     {...props}  >    {children}    <PlusIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />  </AccordionPrimitive.Trigger>);export type Accordion02ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion02Content = ({ className, ...props }: Accordion02ContentProps) => (  <AccordionContent     className={cn('text-muted-foreground pb-2', className)}     {...props}   />);