Accordion

"use client";import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/vip-ui/accordion";export function AccordionDemo() {  return (    <Accordion className="w-full max-w-md">      <AccordionItem id="invite">        <AccordionTrigger>How do I invite teammates?</AccordionTrigger>        <AccordionContent>          Open project settings, choose Members, then send an invitation by          email.        </AccordionContent>      </AccordionItem>      <AccordionItem id="privacy">        <AccordionTrigger>Can I keep a project private?</AccordionTrigger>        <AccordionContent>          Yes. New projects are private until you change access in settings.        </AccordionContent>      </AccordionItem>      <AccordionItem id="export">        <AccordionTrigger>Can I export my work?</AccordionTrigger>        <AccordionContent>          Use Export in project settings to download your project data.        </AccordionContent>      </AccordionItem>    </Accordion>  );}

"use client";import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/vip-ui/accordion";export function AccordionBillingDemo() {  return (    <Accordion variant="divided" className="w-full max-w-md">      <AccordionItem id="invoices">        <AccordionTrigger>Where can I find invoices?</AccordionTrigger>        <AccordionContent>          Open Billing in workspace settings. Invoices stay available after a          plan change.        </AccordionContent>      </AccordionItem>      <AccordionItem id="plans">        <AccordionTrigger>Can I change plans?</AccordionTrigger>        <AccordionContent>          Yes. Choose a plan in Billing. The new price starts on your next          renewal.        </AccordionContent>      </AccordionItem>      <AccordionItem id="cancel">        <AccordionTrigger>How do I cancel?</AccordionTrigger>        <AccordionContent>          Choose Cancel plan in Billing. Your workspace stays active until the          end of the period.        </AccordionContent>      </AccordionItem>    </Accordion>  );}

"use client";import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/vip-ui/accordion";export function AccordionMultipleDemo() {  return (    <Accordion      allowsMultipleExpanded      defaultExpandedKeys={["brief", "files"]}      className="w-full max-w-md"    >      <AccordionItem id="brief">        <AccordionTrigger>Project brief</AccordionTrigger>        <AccordionContent>          Refresh the homepage and pricing pages before the October launch.        </AccordionContent>      </AccordionItem>      <AccordionItem id="files">        <AccordionTrigger>Shared files</AccordionTrigger>        <AccordionContent>          Final layouts, icons, and the approved copy deck.        </AccordionContent>      </AccordionItem>      <AccordionItem id="contacts">        <AccordionTrigger>Contacts</AccordionTrigger>        <AccordionContent>          Maya Chen owns design. Leo Park owns engineering.        </AccordionContent>      </AccordionItem>    </Accordion>  );}

"use client";import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/vip-ui/accordion";export function AccordionDisabledDemo() {  return (    <Accordion className="w-full max-w-md">      <AccordionItem id="invoices">        <AccordionTrigger>Where can I find invoices?</AccordionTrigger>        <AccordionContent>Open Billing in workspace settings.</AccordionContent>      </AccordionItem>      <AccordionItem id="receipts" isDisabled>        <AccordionTrigger>Can I download a tax receipt?</AccordionTrigger>        <AccordionContent>          Tax receipts are not available for this workspace.        </AccordionContent>      </AccordionItem>    </Accordion>  );}