diff options
| author | Arslaan Pathan <[email protected]> | 2026-08-31 17:00:12 +1200 |
|---|---|---|
| committer | Arslaan Pathan <[email protected]> | 2026-08-31 17:00:12 +1200 |
| commit | 5936aedd3d853514a31ebece23175255fb2415c3 (patch) | |
| tree | 829560cffbbb4fde805319c08f984667e498eaf5 /components/ui/accordion.tsx | |
| download | the-agentic-cloud-5936aedd3d853514a31ebece23175255fb2415c3.tar.xz the-agentic-cloud-5936aedd3d853514a31ebece23175255fb2415c3.zip | |
Initial commit
Diffstat (limited to 'components/ui/accordion.tsx')
| -rw-r--r-- | components/ui/accordion.tsx | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..6142db9 --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,74 @@ +"use client" + +import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion" + +import { cn } from "@/lib/utils" +import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" + +function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) { + return ( + <AccordionPrimitive.Root + data-slot="accordion" + className={cn("flex w-full flex-col", className)} + {...props} + /> + ) +} + +function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) { + return ( + <AccordionPrimitive.Item + data-slot="accordion-item" + className={cn("not-last:border-b", className)} + {...props} + /> + ) +} + +function AccordionTrigger({ + className, + children, + ...props +}: AccordionPrimitive.Trigger.Props) { + return ( + <AccordionPrimitive.Header className="flex"> + <AccordionPrimitive.Trigger + data-slot="accordion-trigger" + className={cn( + "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium 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", + className + )} + {...props} + > + {children} + <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" /> + <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" /> + </AccordionPrimitive.Trigger> + </AccordionPrimitive.Header> + ) +} + +function AccordionContent({ + className, + children, + ...props +}: AccordionPrimitive.Panel.Props) { + return ( + <AccordionPrimitive.Panel + data-slot="accordion-content" + className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up" + {...props} + > + <div + className={cn( + "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", + className + )} + > + {children} + </div> + </AccordionPrimitive.Panel> + ) +} + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } |
