preguntas
unknown
html
4 months ago
2.6 kB
2
Indexable
import React from "react"; import { motion, AnimatePresence } from "framer-motion"; import { PlusIcon } from "@heroicons/react/24/outline"; // Importa el ícono de "+" de Heroicons const PreguntasFrecuentes = ({ title, children }) => { const [isOpen, setIsOpen] = React.useState(false); const acordionPreguntas = () => { setIsOpen(!isOpen); }; return ( <div className="flex flex-col items-center justify-center px-4 py-2"> {/* Contenedor del acordeón */} <div className={`w-[48rem] sm:max-w-[30rem] md:max-w-[35rem] lg:max-w-[45rem] bg-gris_hueso rounded-md border overflow-hidden transition-all duration-300 ${isOpen ? "border-verde_lila" : "border-black"} `} > <button className={`flex items-center justify-between text-black w-full p-4 text-left ${isOpen ? "bg-orange" : "" }`} onClick={acordionPreguntas} > <span className="text-base md:text-lg text-black">{title}</span> {/* Ícono de "+" animado */} <motion.span initial={{ rotate: 0 }} animate={{ rotate: isOpen ? 45 : 0 }} transition={{ duration: 0.3, ease: [0.87, 0, 0.13, 1] }} > <PlusIcon className={`w-6 h-6 ${isOpen ? "text-red-500" : "text-morado" }`} /> </motion.span> </button> {/* Contenido del acordeón animado */} <AnimatePresence> {isOpen && ( <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3, ease: [0.87, 0, 0.13, 1] }} className="overflow-hidden" > <div className="p-4 text-black text-sm md:text-base">{children}</div> </motion.div> )} </AnimatePresence> </div> </div> ); }; export default PreguntasFrecuentes;
Editor is loading...
Leave a Comment