Accordion

import { Accordion } from '@hamur/react/accordion'

const items = [
  {
    question: 'What is Base UI?',
    answer:
      'Base UI is a library of high-quality unstyled React components for design systems and web apps.',
  },
  {
    question: 'How do I get started?',
    answer:
      'Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before, you’ll feel at home.',
  },
  {
    question: 'Can I use it for my project?',
    answer: 'Of course! Base UI is free and open source.',
  },
]

export default function AccordionMultipleExample() {
  return (
    <Accordion.Root className="accordion" multiple>
      {items.map((item) => (
        <Accordion.Item key={item.question} className="accordion-item">
          <Accordion.Header className="accordion-header">
            <Accordion.Trigger className="accordion-trigger">{item.question}</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Panel className="accordion-panel">
            <div className="accordion-content">{item.answer}</div>
          </Accordion.Panel>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { Accordion } from '@hamur/react/accordion'

const items = [
  {
    question: 'How long does shipping take?',
    answer:
      'Standard shipping takes 3–5 business days. Express delivery arrives in 1–2 business days.',
  },
  {
    question: 'What is your return policy?',
    answer:
      'You can return any item within 30 days of delivery. Opened items may be subject to a 10% restocking fee.',
  },
  {
    question: 'Do you ship internationally?',
    answer:
      'Yes, we ship to over 40 countries. International orders typically arrive within 7–14 business days.',
  },
  {
    question: 'How can I track my order?',
    answer:
      'Once your order ships, you’ll receive a tracking link by email. Tracking updates can take up to 24 hours to appear.',
  },
]

export default function AccordionHiddenUntilFoundExample() {
  return (
    <Accordion.Root className="accordion" hiddenUntilFound>
      {items.map((item) => (
        <Accordion.Item key={item.question} className="accordion-item">
          <Accordion.Header className="accordion-header">
            <Accordion.Trigger className="accordion-trigger">{item.question}</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Panel className="accordion-panel">
            <div className="accordion-content">{item.answer}</div>
          </Accordion.Panel>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}