Acordeón con NextUI y Tailwind

Aquí tienes un componente de acordeón en React utilizando Tailwind CSS para los estilos y NextUI para las animaciones. El componente es accesible y permite la navegación con el teclado.

Instalación de dependencias

Si aún no tienes NextUI en tu proyecto, instálalo con:

bash
npm install @nextui-org/react

---

Código del Componente Accordion.tsx

tsx
"use client";

import { useState } from "react";
import { Accordion, AccordionItem } from "@nextui-org/react";

const sections = [
  { id: "1", title: "Sección 1", content: "Contenido de la Sección 1." },
  { id: "2", title: "Sección 2", content: "Contenido de la Sección 2." },
  { id: "3", title: "Sección 3", content: "Contenido de la Sección 3." },
];

export default function CustomAccordion() {
  return (
    <div className="max-w-md mx-auto my-10 p-4 bg-white shadow-lg rounded-lg border border-gray-200">
      <h2 className="text-2xl font-semibold text-center mb-4">Acordeón</h2>
      <Accordion selectionMode="multiple" variant="bordered">
        {sections.map((section) => (
          <AccordionItem
            key={section.id}
            title={section.title}
            className="rounded-lg bg-gray-50 text-gray-800"
          >
            {section.content}
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}

---

Explicación del Código

1. Utiliza Accordion y AccordionItem de NextUI para gestionar el acordeón.
2. Aplica estilos con Tailwind CSS:
   • bg-white shadow-lg rounded-lg border para el contenedor.
   • text-gray-800 bg-gray-50 en los elementos.
3. Es accesible:
   • Soporta navegación con teclado automáticamente gracias a NextUI.
   • Permite la expansión múltiple con selectionMode="multiple".

---

Uso en tu Proyecto

En un archivo como page.tsx o cualquier otro componente de Next.js, importa y usa:

tsx
import CustomAccordion from "@/components/Accordion";

export default function Home() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100">
      <CustomAccordion />
    </div>
  );
}

---

Resultado

Este código renderiza un acordeón estilizado con animaciones suaves de NextUI, que es accesible y fácil de usar. ¿Necesitas personalizaciones adicionales?