ogrechkoandClaude Sonnet 5
f53c8b1ed7
SectionHeading always rendered its title as <h2>, so every page whose only heading came from a shared section component (services hub, promotions, cases, faq, contact, reviews, blog list) had no <h1> at all. Add a level prop (default h2) and pass headingLevel="h1" from each page where that section is the page's own top-level heading. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013otXCiTZsxdZ4SJKZ9wUky
50 lines
1.6 KiB
React
50 lines
1.6 KiB
React
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import Reveal from '../Reveal.jsx';
|
|
import SectionHeading from '../SectionHeading.jsx';
|
|
|
|
function cx(...args) {
|
|
return args.filter(Boolean).join(' ');
|
|
}
|
|
|
|
function FaqItem({ item }) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<div className="border-b border-slate-200 dark:border-slate-800">
|
|
<button onClick={() => setOpen(!open)} className="w-full flex items-center justify-between gap-4 py-4 text-left">
|
|
<span className="text-sm sm:text-base font-medium">{item.question}</span>
|
|
<ChevronDown className={cx('h-4 w-4 flex-shrink-0 transition-transform', open && 'rotate-180')} />
|
|
</button>
|
|
{open && <p className="pb-4 text-sm text-slate-600 dark:text-slate-400">{item.answer}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Faq({ faqs, limit, moreHref, headingLevel = 'h2' }) {
|
|
if (faqs.length === 0) return null;
|
|
const list = limit ? faqs.slice(0, limit) : faqs;
|
|
|
|
return (
|
|
<section id="faq" className="max-w-3xl mx-auto px-5 sm:px-8 py-20">
|
|
<SectionHeading eyebrow="faq --common" title="Частые вопросы" level={headingLevel} />
|
|
<Reveal>
|
|
<div>
|
|
{list.map((item) => (
|
|
<FaqItem key={item.id} item={item} />
|
|
))}
|
|
</div>
|
|
</Reveal>
|
|
{moreHref && (
|
|
<Reveal className="mt-6">
|
|
<Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
|
|
Все вопросы →
|
|
</Link>
|
|
</Reveal>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|