Accordion

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Accordion1() {
  return (
    <Accordion type="single" collapsible className="w-full text-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Micro-interactions are events which have one main task — a single
          purpose — and they are found all over your device and within apps.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>
          Why should I use a micro-interaction?
        </AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          You should use micro-interactions to enhance a simple task and to make
          the experience more enjoyable.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>How do I use a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Start by thinking about the task you want the user to perform.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Accordion2() {
  return (
    <Accordion
      type="single"
      collapsible
      className="w-full rounded border text-sm"
    >
      <AccordionItem className="px-4" value="item-1">
        <AccordionTrigger>What is a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Micro-interactions are events which have one main task — a single
          purpose — and they are found all over your device and within apps.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem className="px-4" value="item-2">
        <AccordionTrigger>
          Why should I use a micro-interaction?
        </AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          You should use micro-interactions to enhance a simple task and to make
          the experience more enjoyable.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem className="border-b-0 px-4" value="item-3">
        <AccordionTrigger>How do I use a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Start by thinking about the task you want the user to perform.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Accordion3() {
  return (
    <Accordion type="single" collapsible className="w-full space-y-4 text-sm">
      <AccordionItem
        className="rounded border bg-primary-foreground px-4"
        value="item-1"
      >
        <AccordionTrigger>What is a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Micro-interactions are events which have one main task — a single
          purpose — and they are found all over your device and within apps.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem
        className="rounded border bg-primary-foreground px-4"
        value="item-2"
      >
        <AccordionTrigger>
          Why should I use a micro-interaction?
        </AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          You should use micro-interactions to enhance a simple task and to make
          the experience more enjoyable.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem
        className="rounded border bg-primary-foreground px-4"
        value="item-3"
      >
        <AccordionTrigger>How do I use a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Start by thinking about the task you want the user to perform.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Cog, Mail, Lightning, Users } from "@mynaui/icons-react";

interface AccordionData {
  icon: React.ReactNode;
  title: string;
  content: string[];
}

const accordionData: AccordionData[] = [
  {
    icon: <Lightning className="size-4 stroke-2 text-muted-foreground" />,
    title: "Getting Started",
    content: [
      "Create your MynaUI account",
      "Verify your email address",
      "Complete your profile setup",
      "Explore the dashboard",
    ],
  },
  {
    icon: <Users className="size-4 stroke-2 text-muted-foreground" />,
    title: "User Management",
    content: [
      "Invite team members",
      "Set user permissions",
      "Create user groups",
      "Manage access controls",
    ],
  },
  {
    icon: <Cog className="size-4 stroke-2 text-muted-foreground" />,
    title: "Configuration",
    content: [
      "Configure project settings",
      "Set up integrations",
      "Customize appearance",
      "Define workflow rules",
    ],
  },
  {
    icon: <Mail className="size-4 stroke-2 text-muted-foreground" />,
    title: "Communication",
    content: [
      "Set up notification preferences",
      "Configure email templates",
      "Manage communication channels",
      "Review message history",
    ],
  },
];

export default function IconAccordion() {
  return (
    <div className="mx-auto w-full max-w-7xl p-4">
      <Accordion type="single" collapsible className="w-full">
        {accordionData.map((item, index) => (
          <AccordionItem key={index} value={`item-${index}`}>
            <AccordionTrigger>
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground">{item.icon}</span>
                {item.title}
              </div>
            </AccordionTrigger>
            <AccordionContent>
              <ul className="space-y-2 pl-7">
                {item.content.map((step, stepIndex) => (
                  <li key={stepIndex}>{step}</li>
                ))}
              </ul>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Input } from "@/components/ui/input";
import { Mail, Map, User } from "@mynaui/icons-react";

interface FormSection {
  id: string;
  title: string;
  icon: React.ReactNode;
  children: React.ReactNode;
  isComplete?: boolean;
}

const sections: FormSection[] = [
  {
    id: "1",
    icon: <User className="size-4 stroke-2 text-muted-foreground" />,
    title: "Personal Information",
    children: (
      <div className="flex flex-col gap-2">
        <Input type="text" placeholder="First Name" />
        <Input type="text" placeholder="Last Name" />
      </div>
    ),
  },
  {
    id: "2",
    icon: <Mail className="size-4 stroke-2 text-muted-foreground" />,
    title: "Contact Information",
    children: (
      <div className="flex flex-col gap-2">
        <Input type="email" placeholder="Email" />
        <Input type="tel" placeholder="Phone" />
      </div>
    ),
  },
  {
    id: "3",
    icon: <Map className="size-4 stroke-2 text-muted-foreground" />,
    title: "Address Information",
    children: (
      <div className="flex flex-col gap-2">
        <Input type="text" placeholder="Street" />
        <Input type="text" placeholder="City" />
        <Input type="text" placeholder="State" />
        <Input type="text" placeholder="Zip" />
      </div>
    ),
  },
];

export default function FormSectionAccordion() {
  return (
    <Accordion type="single" collapsible className="w-full">
      {sections.map((section) => (
        <AccordionItem key={section.id} value={section.id}>
          <AccordionTrigger className="group">
            <div className="flex items-center gap-2">
              {section.icon}
              <span>{section.title}</span>
              {section.isComplete && (
                <span className="ml-2 text-sm text-green-500">✓</span>
              )}
            </div>
          </AccordionTrigger>
          <AccordionContent>{section.children}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}