MicroClub Accordion

1import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
2import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
3 
4import { cn } from '@/lib/utils';
5 
6function McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {
7  return (
8    <AccordionPrimitive.Root
9      data-slot="accordion"
10      className={cn('flex w-[503px] flex-col', className)}
11      {...props}
12    />
13  );
14}
15 
16function McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
17  return (
18    <AccordionPrimitive.Item
19      data-slot="accordion-item"
20      className={cn('not-last:border-b', className)}
21      {...props}
22    />
23  );
24}
25 
26function McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
27  return (
28    <AccordionPrimitive.Header className="flex">
29      <AccordionPrimitive.Trigger
30        data-slot="accordion-trigger"
31        className={cn(
32          'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
33          className
34        )}
35        {...props}
36      >
37        {children}
38        <ChevronDownIcon
39          data-slot="accordion-trigger-icon"
40          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
41        />
42        <ChevronUpIcon
43          data-slot="accordion-trigger-icon"
44          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
45        />
46      </AccordionPrimitive.Trigger>
47    </AccordionPrimitive.Header>
48  );
49}
50 
51function McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
52  return (
53    <AccordionPrimitive.Panel
54      data-slot="accordion-content"
55      className="paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up"
56      {...props}
57    >
58      <div
59        className={cn(
60// … truncated