Height auto animation

import type { ComponentProps } from 'react';
import { Accordion } from '@base-ui/react/accordion';

const faqs = [
  {
    question: 'Can I use my own domain?',
    answer:
      'Yes. Add it in project settings and point a CNAME record at your project. HTTPS is set up for you.'
  },
  {
    question: 'Is there a free plan?',
    answer: 'The free plan includes three projects. Upgrade when you need more.'
  },
  {
    question: 'How do I cancel?',
    answer:
      'Cancel anytime from Billing. Your apps stay online until the end of the billing period.'
  }
];

export function Faq() {
  return (
    <Accordion.Root className='w-96 divide-y rounded-xl border'>
      {faqs.map((faq) => (
        <Accordion.Item key={faq.question}>
          <Accordion.Header>
            <Accordion.Trigger className='group flex w-full items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium'>
              {faq.question}
              <ChevronDownIcon className='size-4 shrink-0 transition-transform duration-250 ease-out group-data-panel-open:rotate-180 motion-reduce:transition-none' />
            </Accordion.Trigger>
          </Accordion.Header>
          {/* Base UI measures the answer and exposes its auto height as --accordion-panel-height. */}
          <Accordion.Panel className='h-(--accordion-panel-height) overflow-hidden transition-[height,opacity] duration-250 ease-out data-ending-style:h-0 data-ending-style:opacity-0 data-starting-style:h-0 data-starting-style:opacity-0 motion-reduce:transition-none'>
            <p className='px-4 pb-4 text-sm text-muted-foreground'>
              {faq.answer}
            </p>
          </Accordion.Panel>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  );
}

function ChevronDownIcon(props: ComponentProps<'svg'>) {
  return (
    <svg
      viewBox='0 0 16 16'
      fill='none'
      stroke='currentColor'
      strokeWidth={1.5}
      aria-hidden='true'
      {...props}
    >
      <path d='m4 6 4 4 4-4' />
    </svg>
  );
}