Accordion

File locations:

src/components/accordion.tsx

An accordion is a component that can be collapsed or expanded. It is perfect for building the FAQ section of your webpage.

To use the component, import it into your page.tsx like this:

tsx

import Accordion from "@/components/accordion";

And provide the title and content for each accordion item like this:

tsx

const faqItems = [
  {
    title: <h2>Lorem ipsum dolor sit amet?</h2>,
    content: <div className="flex flex-col gap-4">. . .</div>,
  },
  // . . .
];
 
<Accordion items={faqItems} />;