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
80 lines
3.1 KiB
React
80 lines
3.1 KiB
React
import Link from 'next/link';
|
|
import { Star } from 'lucide-react';
|
|
import Reveal from '../Reveal.jsx';
|
|
import SectionHeading from '../SectionHeading.jsx';
|
|
import ReviewForm from './ReviewForm.jsx';
|
|
|
|
function cx(...args) {
|
|
return args.filter(Boolean).join(' ');
|
|
}
|
|
|
|
export default function Reviews({ reviews, limit, moreHref, showForm = true, headingLevel = 'h2' }) {
|
|
const list = limit ? reviews.slice(0, limit) : reviews;
|
|
|
|
// Пустая витрина отзывов на тизере (главная) выглядит слабо - лучше не показывать
|
|
// секцию вовсе, чем пустой список без формы для его заполнения.
|
|
if (list.length === 0 && !showForm) return null;
|
|
|
|
if (list.length === 0) {
|
|
return (
|
|
<section id="reviews" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
|
|
<div className="max-w-2xl mx-auto px-5 sm:px-8">
|
|
<SectionHeading
|
|
eyebrow="reviews --approved"
|
|
title="Отзывы клиентов"
|
|
desc="Отзывов пока нет - будьте первым, кто расскажет о работе с нами. Публикуется после проверки менеджером."
|
|
level={headingLevel}
|
|
/>
|
|
<Reveal>
|
|
<ReviewForm />
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section id="reviews" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
|
|
<div className="max-w-6xl mx-auto px-5 sm:px-8">
|
|
<SectionHeading
|
|
eyebrow="reviews --approved"
|
|
title="Отзывы клиентов"
|
|
desc="Публикуются после проверки менеджером - это защищает страницу от спама и фейков."
|
|
level={headingLevel}
|
|
/>
|
|
<div className={cx('grid gap-10', showForm && 'md:grid-cols-2')}>
|
|
<Reveal>
|
|
<div className="space-y-4">
|
|
{list.map((r) => (
|
|
<div key={r.id} className="rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
|
|
<div className="flex items-center gap-1 mb-2">
|
|
{[1, 2, 3, 4, 5].map((n) => (
|
|
<Star key={n} className={cx('h-4 w-4', n <= r.rating ? 'fill-amber-400 text-amber-400' : 'text-slate-300')} />
|
|
))}
|
|
</div>
|
|
<p className="text-sm mb-3">{r.text}</p>
|
|
<p className="text-xs text-slate-400 dark:text-slate-500">
|
|
{r.name}
|
|
{r.role ? ` · ${r.role}` : ''}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{moreHref && (
|
|
<Link href={moreHref} className="mt-6 inline-block text-sm text-emerald-500 font-medium hover:underline">
|
|
Все отзывы →
|
|
</Link>
|
|
)}
|
|
</Reveal>
|
|
|
|
{showForm && (
|
|
<Reveal delay={100}>
|
|
<ReviewForm />
|
|
</Reveal>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|