Template
40 lines
1.8 KiB
TypeScript
40 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { Accordion as AccordionPrimitive } from 'radix-ui';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
function Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
|
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
|
}
|
|
|
|
function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
|
return <AccordionPrimitive.Item data-slot="accordion-item" className={cn('border-b', className)} {...props} />;
|
|
}
|
|
|
|
function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
|
return (
|
|
<AccordionPrimitive.Header className="flex">
|
|
<AccordionPrimitive.Trigger
|
|
data-slot="accordion-trigger"
|
|
className={cn('flex flex-1 items-start justify-between gap-6 py-6 text-left text-lg font-medium outline-none transition-colors hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/50 [&[data-state=open]>svg]:rotate-180', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<ChevronDown className="mt-1 size-5 shrink-0 transition-transform duration-200" aria-hidden="true" />
|
|
</AccordionPrimitive.Trigger>
|
|
</AccordionPrimitive.Header>
|
|
);
|
|
}
|
|
|
|
function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
|
return (
|
|
<AccordionPrimitive.Content data-slot="accordion-content" className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" {...props}>
|
|
<div className={cn('pb-6', className)}>{children}</div>
|
|
</AccordionPrimitive.Content>
|
|
);
|
|
}
|
|
|
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|