Accordion

import { Accordion } from "@nili/ui"

export function Example() {
  return (
    <>
      <Accordion
        title="How long does delivery take?"
        content="Orders placed before 14:00 ship the same day."
      />

      {/* the same thing, as children */}
      <Accordion title="What is the return policy?">
        Anything unopened can be returned within thirty days.
      </Accordion>
    </>
  )
}

import { Accordion } from "@nili/ui"

export function Example() {
  const [open, setOpen] = useState(true)

  return (
    <>
      <Accordion defaultOpen title={t('states.startsOpen')} content="…" />

      <Accordion
        open={open}
        onOpenChange={setOpen}
        title="Controlled"
        content="…"
      />

      <Accordion disabled title="Disabled" content="…" />
    </>
  )
}

import { Accordion, Icon } from "@nili/ui"
import { RiQuestionLine, RiArrowDownSLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Accordion
        indicatorPosition="start"
        title={t('indicator.atStart')}
        content="…"
      />

      <Accordion
        indicator={<Icon icon={RiArrowDownSLine} />}
        title={t('indicator.custom')}
        content="…"
      />

      <Accordion
        startAdornment={<Icon icon={RiQuestionLine} size={20} />}
        title={t('indicator.withIcon')}
        content="…"
      />
    </>
  )
}

import { Accordion, AccordionGroup } from "@nili/ui"

export function Example() {
  return (
    <AccordionGroup defaultValue={["shipping"]}>
      <Accordion id="shipping" title="How long does delivery take?" content="…" />
      <Accordion id="returns" title="What is the return policy?" content="…" />
      <Accordion id="support" title="How do I reach support?" content="…" />
    </AccordionGroup>
  )
}

import { Accordion, AccordionGroup } from "@nili/ui"

export function Example() {
  return (
    <AccordionGroup type="single" collapsible={false} defaultValue={["shipping"]}>
      <Accordion id="shipping" title="How long does delivery take?" content="…" />
      <Accordion id="returns" title="What is the return policy?" content="…" />
    </AccordionGroup>
  )
}