Animated Accordion

"use client";
import { useState } from "react";

export default function Accordion({ items }: { items: { title: string; content: string }[] }) {
  const [openIdx, setOpenIdx] = useState<number | null>(0);

  return (
    <div>
      {items.map((item, i) => (
        <div key={i}>
          <button onClick={() => setOpenIdx(openIdx === i ? null : i)}>
            <span>{item.title}</span>
            <span style={{
              transform: openIdx === i ? "rotate(45deg)" : "rotate(0deg)",
              transition: "transform 0.3s",
            }}>+</span>
          </button>
          <div style={{
            display: "grid",
            gridTemplateRows: openIdx === i ? "1fr" : "0fr",
            transition: "grid-template-rows 0.3s ease-out",
          }}>
            <div style={{ overflow: "hidden" }}>
              <p>{item.content}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}