damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

Accordion.tsx (2038B)

      1 "use client"
      2 
      3 import * as React from "react"
      4 import * as AccordionPrimitive from "@radix-ui/react-accordion"
      5 import { ChevronDownIcon } from "lucide-react"
      6 
      7 import { cn } from "@/lib/utils"
      8 
      9 const Accordion = AccordionPrimitive.Root
     10 
     11 const AccordionItem = React.forwardRef<
     12   React.ElementRef<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-white/30", className)}
     18     {...props}
     19   />
     20 ))
     21 AccordionItem.displayName = "AccordionItem"
     22 
     23 const AccordionTrigger = React.forwardRef<
     24   React.ElementRef<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-sm font-semibold transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
     32         className
     33       )}
     34       {...props}
     35     >
     36       {children}
     37       <ChevronDownIcon className="h-4 w-4 shrink-0 text-white/70 transition-transform duration-200" />
     38     </AccordionPrimitive.Trigger>
     39   </AccordionPrimitive.Header>
     40 ))
     41 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
     42 
     43 const AccordionContent = React.forwardRef<
     44   React.ElementRef<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 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-white/60"
     50     {...props}
     51   >
     52     <div className={cn("pb-4 pt-0", className)}>{children}</div>
     53   </AccordionPrimitive.Content>
     54 ))
     55 AccordionContent.displayName = AccordionPrimitive.Content.displayName
     56 
     57 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
     58