Glass Accordion

1'use client'
2 
3import * as React from 'react'
4import { Accordion as AccordionPrimitive } from 'radix-ui'
5import { ChevronDown } from 'lucide-react'
6 
7import { cn } from '@/lib/utils'
8 
9const GlassAccordion = AccordionPrimitive.Root
10 
11const GlassAccordionItem = React.forwardRef<
12  React.ComponentRef<typeof AccordionPrimitive.Item>,
13  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14>(({ className, ...props }, ref) => (
15  <AccordionPrimitive.Item
16    ref={ref}
17    className={cn('border-b border-foreground/10 last:border-b-0', className)}
18    {...props}
19  />
20))
21GlassAccordionItem.displayName = 'GlassAccordionItem'
22 
23const GlassAccordionTrigger = React.forwardRef<
24  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
25  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26>(({ className, children, ...props }, ref) => (
27  <AccordionPrimitive.Header className="flex">
28    <AccordionPrimitive.Trigger
29      ref={ref}
30      className={cn(
31        'flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:text-ruri dark:hover:text-ruri-soft [&[data-state=open]>svg]:rotate-180',
32        className,
33      )}
34      {...props}
35    >
36      {children}
37      <ChevronDown className="size-4 shrink-0 text-faint transition-transform duration-200" />
38    </AccordionPrimitive.Trigger>
39  </AccordionPrimitive.Header>
40))
41GlassAccordionTrigger.displayName = 'GlassAccordionTrigger'
42 
43const GlassAccordionContent = React.forwardRef<
44  React.ComponentRef<typeof AccordionPrimitive.Content>,
45  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46>(({ className, children, ...props }, ref) => (
47  <AccordionPrimitive.Content
48    ref={ref}
49    className="overflow-hidden text-sm text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50    {...props}
51  >
52    <div className={cn('pb-4', className)}>{children}</div>
53  </AccordionPrimitive.Content>
54))
55GlassAccordionContent.displayName = 'GlassAccordionContent'
56 
57export { GlassAccordion, GlassAccordionItem, GlassAccordionTrigger, GlassAccordionContent }