"use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "framer-motion"; import { useState } from "react"; const FAQS = [ { id: 1, title: "What is UI/TOPIA?", content: "UI/TOPIA is a curated showcase of UI components that blend aesthetic appeal with accessibility and versatility, built with Framer Motion and TailwindCSS. ", isFav: true, }, { id: 2, title: "Can I use this in my project?", content: "Yes, you can use it in your project. It`s open source and available on GitHub.", }, { id: 3, title: "Can I add components to this site?", content: "Yes, you can! We welcome contributions from the community. Adding your components to ui/topia is a great way to showcase your work and help other developers.", }, { id: 4, title: "Can I modify the components to fit my needs?", content: "Absolutely! In fact, we encourage it. The components are designed to be starting points that you can customize and adapt to your specific project requirements", isStar: true, }, { id: 5, title: "Are the components responsive?", content: "Yes, all our components are designed with responsiveness in mind. However, you may need to adjust some aspects depending on your specific use case and design requirements.", }, ]; const FancyCarousel = () => { const [active, setActive] = useState(); const handleSelect = (id: number) => { if (active === id) { setActive(undefined); } else { setActive(id); } }; return (

Accordion

{FAQS.map((faq) => ( handleSelect(faq.id)} /> ))}

); }; export default FancyCarousel; interface AccordionItemProps { isActive: boolean; title: string; content: string; onSelect: () => void; isFav?: boolean; isStar?: boolean; } const AccordionItem = ({ isActive, title, content, onSelect, isFav = false, isStar = false, }: AccordionItemProps) => { return (

{isActive && (

{content}

)}

); };

Accordion

Accordion

On this page