45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { cn } from "@core/utils/cn.ts";
|
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
import { ChevronDownIcon } from "lucide-react";
|
|
import { type ComponentRef, forwardRef } from "react";
|
|
|
|
export const Accordion = AccordionPrimitive.Root;
|
|
|
|
export const AccordionHeader = AccordionPrimitive.Header;
|
|
|
|
export const AccordionItem = AccordionPrimitive.Item;
|
|
|
|
export const AccordionTrigger = forwardRef<
|
|
ComponentRef<typeof AccordionPrimitive.Trigger>,
|
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
|
>(({ className, ...props }, ref) => (
|
|
<AccordionPrimitive.Trigger
|
|
ref={ref}
|
|
className={cn(
|
|
"flex justify-between items-center w-full p-4 border-b border-gray-200 dark:border-gray-800 group",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{props.children}
|
|
<ChevronDownIcon
|
|
className="h-5 w-5 transition-transform duration-300 group-data-[state=open]:rotate-180"
|
|
aria-hidden
|
|
/>
|
|
</AccordionPrimitive.Trigger>
|
|
));
|
|
|
|
export const AccordionContent = forwardRef<
|
|
ComponentRef<typeof AccordionPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
|
>(({ className, ...props }, ref) => (
|
|
<AccordionPrimitive.Content
|
|
ref={ref}
|
|
className={cn(
|
|
"p-4 border-b border-gray-200 dark:border-gray-800",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|