Accordion

1"use client";
2 
3import { Accordion } from "@base-ui/react/accordion";
4import { cn } from "@/lib/utils";
5import styles from "./accordion.module.css";
6 
7function AccordionRoot({ className, ...props }: Accordion.Root.Props) {
8  return <Accordion.Root className={cn(styles.root, className)} data-slot="accordion-root" {...props} />;
9}
10 
11function AccordionItem({ className, ...props }: Accordion.Item.Props) {
12  return <Accordion.Item className={cn(styles.item, className)} data-slot="accordion-item" {...props} />;
13}
14 
15function AccordionHeader({ className, ...props }: Accordion.Header.Props) {
16  return <Accordion.Header className={cn(styles.header, className)} data-slot="accordion-header" {...props} />;
17}
18 
19function AccordionTrigger({ className, children, ...props }: Accordion.Trigger.Props) {
20  return (
21    <Accordion.Trigger className={cn(styles.trigger, className)} data-slot="accordion-trigger" {...props}>
22      <div className={styles.icon}>
23        <svg aria-label="Accordion toggle icon" fill="none" height="18" role="img" viewBox="0 0 20 20" width="18">
24          <title>Toggle accordion</title>
25          <path
26            className={styles.horizontalLine}
27            d="M4 10L16 10"
28            stroke="currentColor"
29            strokeLinecap="round"
30            strokeWidth="2"
31          />
32          <path d="M10 4L10 16" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
33        </svg>
34      </div>
35      <div>{children}</div>
36    </Accordion.Trigger>
37  );
38}
39 
40function AccordionPanel({ className, children, ...props }: Accordion.Panel.Props) {
41  return (
42    <Accordion.Panel className={cn(styles.panel, className)} data-slot="accordion-panel" {...props}>
43      <div className={styles.content}>
44        <div className={styles.contentInner}>{children}</div>
45      </div>
46    </Accordion.Panel>
47  );
48}
49 
50export { AccordionRoot as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger };