@medalsocial/meda
Version:
Shared Meda UI shell and runtime package.
13 lines (12 loc) • 1.46 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDown } from 'lucide-react';
import { useState } from 'react';
import { cx } from './utils.js';
export function MarketingFAQ({ eyebrow, title, items, defaultOpenId, className, }) {
const [openId, setOpenId] = useState(defaultOpenId ?? null);
return (_jsxs("section", { className: cx('mx-auto w-full max-w-3xl px-6 py-16', className), children: [(eyebrow || title) && (_jsxs("div", { className: "mb-10 text-center", children: [eyebrow && _jsx("p", { className: "text-sm font-semibold text-primary", children: eyebrow }), title && _jsx("h2", { className: "mt-2 text-3xl font-semibold sm:text-4xl", children: title })] })), _jsx("ul", { className: "space-y-3", children: items.map((item) => {
const open = openId === item.id;
return (_jsxs("li", { className: "rounded-2xl border border-border bg-card", children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpenId(open ? null : item.id), className: "flex w-full items-center justify-between px-5 py-4 text-left text-base font-medium", children: [item.question, _jsx(ChevronDown, { className: cx('h-4 w-4 transition', open && 'rotate-180'), "aria-hidden": true })] }), open && (_jsx("div", { className: "border-t border-border px-5 py-4 text-sm text-muted-foreground", children: item.answer }))] }, item.id));
}) })] }));
}