"use client" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/app/_components/ui/accordion" export interface FAQItem { question: string answer: string } export interface FAQAccordionProps { layout?: "default" | "two-column" title?: string subtitle?: string items?: FAQItem[] } export const defaultFAQItems: FAQItem[] = [ { question: "What is MyloUI Blocks?", answer: "MyloUI Blocks is a collection of copy-paste ready components built with shadcn/ui and Tailwind CSS. It provides pre-built sections and blocks that you can easily integrate into your Next.js applications.", }, { question: "How do I install a block?", answer: "You can install blocks using the shadcn CLI with the command: npx shadcn add @mylo-ui/block-name. Alternatively, you can copy the code directly from the documentation and paste it into your project.", }, { question: "Do I need to install shadcn/ui first?", answer: "Yes, MyloUI Blocks is built on top of shadcn/ui components. You'll need to have shadcn/ui set up in your project before using these blocks. The blocks assume you have the base shadcn components already installed.", }, { question: "Are the blocks responsive?", answer: "Yes, all blocks are fully responsive and work great on mobile, tablet, and desktop devices. They use Tailwind CSS responsive modifiers to adapt to different screen sizes.", }, { question: "Can I customize the blocks?", answer: "Absolutely! All blocks are built with Tailwind CSS, making them highly customizable. You can modify colors, spacing, typography, and any other aspect to match your brand.", }, { question: "Is there dark mode support?", answer: "Yes, all blocks support dark mode out of the box when you have next-themes configured in your project. The blocks use semantic color tokens that automatically adapt to light and dark themes.", }, ] /** * FAQAccordion - FAQ section with accordion * * @description * A FAQ section with collapsible accordion items for questions and answers. * Supports single column or two-column layouts. * * @usage * ```tsx * import { FAQAccordion } from "@/components/blocks/faq-accordion" * * * ``` * * @dependencies * - @/components/ui/accordion * * @props * - layout: "default" | "two-column" - Layout style * - title: string - Section title * - subtitle: string - Section subtitle * - items: FAQItem[] - Array of FAQ items * * @category FAQ * @tags landing, support, questions */ export function FAQAccordion({ layout = "default", title = "Frequently asked questions", subtitle = "Everything you need to know about MyloUI Blocks.", items = defaultFAQItems, }: FAQAccordionProps) { if (layout === "two-column") { const midPoint = Math.ceil(items.length / 2) const leftColumn = items.slice(0, midPoint) const rightColumn = items.slice(midPoint) return (

{title}

{subtitle}

{leftColumn.map((faq, index) => ( {faq.question} {faq.answer} ))} {rightColumn.map((faq, index) => ( {faq.question} {faq.answer} ))}

) } return (

{title}

{subtitle}

{items.map((faq, index) => ( {faq.question} {faq.answer} ))}

) }

Accordion FAQ

Installation

Preview

Frequently asked questions

What is MyloUI Blocks?

How do I install a block?

Do I need to install shadcn/ui first?

Are the blocks responsive?

Can I customize the blocks?

Is there dark mode support?

Usage

Dependencies

shadcn/ui Components