accordion-demo

1import {
2  Accordion,
3  AccordionPanel,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/registry/pure-ui/ui/accordion";
7
8export function AccordionDemo() {
9  return (
10    <Accordion className="w-full max-w-xl">
11      <AccordionItem value="item-1">
12        <AccordionTrigger>What is Next.js?</AccordionTrigger>
13        <AccordionPanel className="flex flex-col gap-4 text-balance">
14          <p className="text-sm text-muted-foreground">
15            Next.js is a React framework that makes building fast, SEO-friendly
16            web apps easy with server rendering and automatic routing.
17          </p>
18        </AccordionPanel>
19      </AccordionItem>
20      <AccordionItem value="item-2">
21        <AccordionTrigger>Why Use the App Router?</AccordionTrigger>
22        <AccordionPanel className="flex flex-col gap-4 text-balance">
23          <p className="text-sm text-muted-foreground">
24            The App Router offers layouts, server components, and better
25            data-fetching, giving you cleaner structure and faster performance.
26          </p>
27        </AccordionPanel>
28      </AccordionItem>
29      <AccordionItem value="item-3">
30        <AccordionTrigger>Data Fetching in Next.js</AccordionTrigger>
31        <AccordionPanel className="flex flex-col gap-4 text-balance">
32          <p className="text-sm text-muted-foreground">
33            Next.js supports static, dynamic, and server-side data fetching,
34            letting you choose the best method per component.
35          </p>
36        </AccordionPanel>
37      </AccordionItem>
38      <AccordionItem value="item-4">
39        <AccordionTrigger>SEO Benefits of Static Generation</AccordionTrigger>
40        <AccordionPanel className="flex flex-col gap-4 text-balance">
41          <p className="text-sm text-muted-foreground">
42            Static generation ensures pages are pre-rendered with content,
43            improving SEO by providing fully-rendered HTML at build time.
44          </p>
45        </AccordionPanel>
46      </AccordionItem>
47      <AccordionItem value="item-5">
48        <AccordionTrigger>File-Based Routing</AccordionTrigger>
49        <AccordionPanel className="flex flex-col gap-4 text-balance">
50          <p className="text-sm text-muted-foreground">
51            Pages and routes are created automatically from your folder
52            structure, including support for dynamic and nested routes.
53          </p>
54        </AccordionPanel>
55      </AccordionItem>
56    </Accordion>
57// … truncated