Animated Accordion

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { ChevronDown } from "lucide-react";
5import { useState } from "react";
6 
7const items = [
8  {
9    title: "What is your return policy?",
10    content:
11      "We offer a 30-day money-back guarantee on all our products. If you're not satisfied, contact our support team for a full refund.",
12  },
13  {
14    title: "How long does shipping take?",
15    content:
16      "Standard shipping takes 5-7 business days. Express shipping is available for 2-3 day delivery.",
17  },
18  {
19    title: "Do you ship internationally?",
20    content:
21      "Yes, we ship to over 50 countries worldwide. International shipping times vary by location.",
22  },
23];
24 
25export function AnimatedAccordion() {
26  const [openIndex, setOpenIndex] = useState<number | null>(null);
27 
28  return (
29    <div className="w-full max-w-2xl space-y-2">
30      {items.map((item, index) => (
31        <div
32          key={index}
33          className="overflow-hidden rounded-xl border  bg-[var(--card-bg)]"
34        >
35          <motion.button
36            onClick={() => setOpenIndex(openIndex === index ? null : index)}
37            className="flex w-full items-center justify-between p-4 text-left text-sm font-medium"
38            whileHover={{ backgroundColor: "rgba(var(--accent-rgb), 0.05)" }}
39          >
40            <span>{item.title}</span>
41            <motion.div
42              animate={{ rotate: openIndex === index ? 180 : 0 }}
43              transition={{ duration: 0.3 }}
44            >
45              <ChevronDown className="h-5 w-5" />
46            </motion.div>
47          </motion.button>
48 
49          <AnimatePresence initial={false}>
50            {openIndex === index && (
51              <motion.div
52                initial={{ height: 0, opacity: 0 }}
53                animate={{ height: "auto", opacity: 1 }}
54                exit={{ height: 0, opacity: 0 }}
55                transition={{ duration: 0.3, ease: "easeInOut" }}
56              >
57                <div className="border-t  p-4 text-sm text-[var(--foreground)]/70">
58                  {item.content}
59                </div>
60              </motion.div>
61            )}
62          </AnimatePresence>
63        </div>
64      ))}
65    </div>
66  );
67}