feat(sprint4): add cards page — DoctorCard, NewsCard, ReviewCard, PriceCard, ServiceCard, badges/tags/alerts
- /components/cards — new page with 5 card types + badges/tags/alerts + LLM block v1.0 - DoctorCard: photo 110×160px placeholder, name, specialty, experience, outline button - NewsCard: hover bg #eef4d1 + box-shadow (matches real site CSS), CSS class .bb-news-card - ReviewCard: star rating 1-5 (SVG), text 4-line clamp, bg #eef4d1 - PriceCard: service + price + description + button, highlighted variant (blue border/bg) - ServiceCard: emoji icon 48×48px, title, description, link - Badges: 6 color variants (primary/success/warning/danger/neutral/outline) - Tags: default/active state filters - Alerts: 4 types (info/success/warning/error) with icons - globals.css: .bb-news-card:hover, .bb-service-card:hover CSS rules (Sprint 4) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -0,0 +1,629 @@
|
||||
import type { Metadata } from "next";
|
||||
import { CodeCopy } from "@/components/ui/CodeCopy";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Карточки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function Section({
|
||||
id, title, subtitle, children,
|
||||
}: {
|
||||
id?: string; title: string; subtitle?: string; children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className="mb-14">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>{title}</h2>
|
||||
{subtitle && <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>{subtitle}</p>}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка врача ────────────────────────────────────────────────── */
|
||||
function DoctorCard({
|
||||
name, specialty, experience, photo,
|
||||
}: {
|
||||
name: string; specialty: string; experience: string; photo?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="flex gap-4 p-4 rounded-xl border bg-white transition-shadow"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
{/* Фото */}
|
||||
<div
|
||||
className="shrink-0 rounded-lg overflow-hidden"
|
||||
style={{ width: 110, height: 160, background: "#dff0fa" }}
|
||||
>
|
||||
{photo ? (
|
||||
<img src={photo} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||
) : (
|
||||
<div
|
||||
className="w-full h-full flex flex-col items-center justify-center gap-1"
|
||||
style={{ color: "var(--brand-053m)", opacity: 0.5 }}
|
||||
>
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
<span className="text-xs">фото</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Информация */}
|
||||
<div className="flex flex-col justify-between min-w-0">
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm leading-tight mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{name}
|
||||
</h3>
|
||||
<p className="text-xs mb-2" style={{ color: "var(--bb-text-muted)" }}>{specialty}</p>
|
||||
<p className="text-xs" style={{ color: "var(--brand-053m)" }}>{experience}</p>
|
||||
</div>
|
||||
<button className="bb-btn bb-btn-sm bb-btn-outline mt-3 self-start">
|
||||
Записаться
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка новости ──────────────────────────────────────────────── */
|
||||
function NewsCard({
|
||||
date, title, snippet, category,
|
||||
}: {
|
||||
date: string; title: string; snippet: string; category?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="bb-news-card rounded-xl border overflow-hidden cursor-pointer transition-all"
|
||||
style={{ borderColor: "var(--bb-border)", background: "#fff" }}
|
||||
>
|
||||
{/* Превью */}
|
||||
<div
|
||||
className="h-36 flex items-center justify-center"
|
||||
style={{ background: "#f0f9ff" }}
|
||||
>
|
||||
{category && (
|
||||
<span
|
||||
className="px-3 py-1 rounded-full text-xs font-semibold"
|
||||
style={{ background: "var(--brand-053m)", color: "#fff" }}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div className="p-4">
|
||||
<p className="text-xs mb-2" style={{ color: "var(--bb-text-muted)" }}>{date}</p>
|
||||
<h3 className="font-semibold text-sm leading-tight mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs leading-relaxed mb-3" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{snippet}
|
||||
</p>
|
||||
<span className="text-xs font-medium" style={{ color: "var(--brand-053m)" }}>
|
||||
Читать далее →
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка отзыва ───────────────────────────────────────────────── */
|
||||
function ReviewCard({
|
||||
author, date, text, rating, doctor,
|
||||
}: {
|
||||
author: string; date: string; text: string; rating: number; doctor?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl border p-5"
|
||||
style={{ borderColor: "var(--bb-border)", background: "#eef4d1" }}
|
||||
>
|
||||
{/* Звёзды */}
|
||||
<div className="flex gap-0.5 mb-3">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<svg key={i} width="16" height="16" viewBox="0 0 24 24" fill={i < rating ? "#f59e0b" : "none"} stroke="#f59e0b" strokeWidth="1.5">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
))}
|
||||
<span className="text-xs ml-1 font-medium" style={{ color: "#92400e" }}>{rating}/5</span>
|
||||
</div>
|
||||
|
||||
{/* Текст */}
|
||||
<p
|
||||
className="text-sm leading-relaxed mb-4"
|
||||
style={{
|
||||
color: "var(--bb-text)",
|
||||
display: "-webkit-box",
|
||||
WebkitLineClamp: 4,
|
||||
WebkitBoxOrient: "vertical",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
|
||||
{/* Автор */}
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold" style={{ color: "var(--bb-text)" }}>{author}</p>
|
||||
{doctor && <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>Врач: {doctor}</p>}
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{date}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка цены ─────────────────────────────────────────────────── */
|
||||
function PriceCard({
|
||||
service, price, description, highlighted,
|
||||
}: {
|
||||
service: string; price: string; description?: string; highlighted?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl border p-5 flex flex-col gap-3"
|
||||
style={{
|
||||
borderColor: highlighted ? "var(--brand-053m)" : "var(--bb-border)",
|
||||
background: highlighted ? "#f0f9ff" : "#fff",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<p className="text-sm font-medium flex-1" style={{ color: "var(--bb-text)" }}>{service}</p>
|
||||
<p className="text-lg font-bold shrink-0" style={{ color: highlighted ? "var(--brand-053m)" : "var(--bb-text)" }}>
|
||||
{price}
|
||||
</p>
|
||||
</div>
|
||||
{description && (
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{description}</p>
|
||||
)}
|
||||
<button className="bb-btn bb-btn-sm bb-btn-outline self-start">
|
||||
Записаться
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка услуги ───────────────────────────────────────────────── */
|
||||
function ServiceCard({
|
||||
title, description, icon,
|
||||
}: {
|
||||
title: string; description: string; icon: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="bb-service-card rounded-xl border p-5 flex flex-col gap-3 cursor-pointer transition-shadow"
|
||||
style={{ borderColor: "var(--bb-border)", background: "#fff" }}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl"
|
||||
style={{ background: "#dff0fa" }}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>{title}</h3>
|
||||
<p className="text-xs leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>{description}</p>
|
||||
</div>
|
||||
<span className="text-xs font-medium" style={{ color: "var(--brand-053m)" }}>
|
||||
Подробнее →
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── LLM текст ─────────────────────────────────────────────────────── */
|
||||
const LLM_CARDS_TEXT = `КАРТОЧКИ — LLM-спецификация
|
||||
Версия: v1.0 · /components/cards
|
||||
|
||||
КАРТОЧКА ВРАЧА (DoctorCard)
|
||||
Структура: фото (110×160px) + имя + специализация + опыт + кнопка «Записаться»
|
||||
Фото: 110px × 160px, object-fit: cover, border-radius: 8px, фон-placeholder: #dff0fa
|
||||
Кнопка: .bb-btn-outline .bb-btn-sm
|
||||
Источник: .doctor на perm.oclinica.ru
|
||||
|
||||
КАРТОЧКА НОВОСТИ (NewsCard)
|
||||
Структура: превью (h=144px) + дата + заголовок + анонс (4 строки) + «Читать далее →»
|
||||
Hover: background #eef4d1 + box-shadow 0 0 16px #9e9e9a
|
||||
Источник: #block-views-last-news-block-1 .views-column на сайте (200×200px)
|
||||
Без hover: background #fff, border 1px
|
||||
|
||||
КАРТОЧКА ОТЗЫВА (ReviewCard)
|
||||
Структура: рейтинг (звёзды 1–5) + текст (4 строки, overflow hidden) + автор + дата + врач
|
||||
Фон: #eef4d1 (светло-жёлтый) — из реального CSS сайта
|
||||
Звёзды: SVG polygon, filled #f59e0b
|
||||
|
||||
КАРТОЧКА ЦЕНЫ (PriceCard)
|
||||
Структура: услуга + цена (bold) + описание + кнопка
|
||||
highlighted-вариант: border var(--brand-053m), bg #f0f9ff, цена тоже --brand-053m
|
||||
|
||||
КАРТОЧКА УСЛУГИ (ServiceCard)
|
||||
Структура: иконка (emoji, 48×48px, bg #dff0fa) + заголовок + описание + «Подробнее →»
|
||||
Hover: box-shadow (0.5rem smth)
|
||||
|
||||
БЕЙДЖИ (Badge)
|
||||
Варианты: primary (#0089c3), success (#059669), warning (#d97706), danger (#dc2626), neutral (#6b7280)
|
||||
Размер: text-xs, px-2.5 py-0.5, border-radius: full
|
||||
CSS: inline-flex, font-weight: 600
|
||||
|
||||
ТЕГИ (Tag)
|
||||
Варианты: default (border, text), filled (bg), removable (с кнопкой ×)
|
||||
Цвет: --brand-053m или нейтральный (#e5e7eb bg)
|
||||
Размер: text-xs, px-2 py-1, border-radius: 4px
|
||||
|
||||
АЛЕРТЫ (Alert)
|
||||
Варианты: info (#dff0fa фон, #075985 текст), success (#d1fae5, #065f46), warning (#fef3c7, #92400e), error (#fee2e2, #991b1b)
|
||||
Структура: иконка (16×16px) + заголовок + описание
|
||||
Без кнопки закрыть в базовом варианте
|
||||
|
||||
ПРАВИЛА
|
||||
✓ DoctorCard: всегда показывать фото-placeholder если нет фото (не ломать layout)
|
||||
✓ ReviewCard: обрезать текст после 4 строк (WebkitLineClamp)
|
||||
✓ PriceCard: highlighted = акционная или рекомендуемая позиция
|
||||
✓ NewsCard: hover-эффект обязателен (#eef4d1 + box-shadow)
|
||||
✓ Badge: не более 2–3 бейджей рядом
|
||||
✓ Alert: одновременно не более 1 alert одного типа на экране
|
||||
✕ Не смешивать типы карточек в одной сетке без заголовка секции
|
||||
✕ Не использовать ReviewCard без рейтинга`.trim();
|
||||
|
||||
/* ─── Данные примеров ───────────────────────────────────────────────── */
|
||||
const DOCTORS = [
|
||||
{
|
||||
name: "Иванова Анна Сергеевна",
|
||||
specialty: "Оториноларинголог (ЛОР), высшая категория",
|
||||
experience: "Стаж 18 лет",
|
||||
},
|
||||
{
|
||||
name: "Петров Дмитрий Александрович",
|
||||
specialty: "Сурдолог, аудиолог",
|
||||
experience: "Стаж 12 лет",
|
||||
},
|
||||
{
|
||||
name: "Соколова Мария Ивановна",
|
||||
specialty: "Детский ЛОР, ринолог",
|
||||
experience: "Стаж 9 лет",
|
||||
},
|
||||
];
|
||||
|
||||
const REVIEWS = [
|
||||
{
|
||||
author: "Елена К.",
|
||||
date: "15 марта 2026",
|
||||
rating: 5,
|
||||
doctor: "Иванова А.С.",
|
||||
text: "Очень довольна визитом. Доктор внимательно выслушала все жалобы, провела осмотр и объяснила причину заболевания. Назначила лечение, которое помогло уже через 3 дня. Рекомендую!",
|
||||
},
|
||||
{
|
||||
author: "Михаил Р.",
|
||||
date: "10 марта 2026",
|
||||
rating: 4,
|
||||
doctor: "Петров Д.А.",
|
||||
text: "Хороший специалист, всё объяснил понятно. Подождал немного дольше, чем ожидал, но качество приёма на высоте. Буду обращаться снова.",
|
||||
},
|
||||
];
|
||||
|
||||
const PRICES = [
|
||||
{ service: "Первичный приём ЛОР-врача", price: "1 500 ₽", description: "Включает осмотр и консультацию" },
|
||||
{ service: "Повторный приём", price: "1 000 ₽", description: "До 14 дней после первичного" },
|
||||
{ service: "Промывание миндалин", price: "800 ₽", highlighted: true, description: "Аппаратное — аккустический вакуум" },
|
||||
{ service: "Аудиометрия", price: "1 200 ₽", description: "Исследование слуха" },
|
||||
];
|
||||
|
||||
const SERVICES = [
|
||||
{ title: "Лечение ангины и тонзиллита", description: "Консервативное и хирургическое лечение заболеваний миндалин", icon: "🦷" },
|
||||
{ title: "Аудиология и сурдология", description: "Диагностика нарушений слуха, подбор слуховых аппаратов", icon: "👂" },
|
||||
{ title: "Детский ЛОР", description: "Специализация на лечении ЛОР-заболеваний у детей от 0 лет", icon: "👶" },
|
||||
{ title: "Ринология", description: "Лечение заболеваний носа и придаточных пазух", icon: "👃" },
|
||||
];
|
||||
|
||||
/* ─── Коды примеров ─────────────────────────────────────────────────── */
|
||||
const codeDoctorCard = `<!-- Карточка врача -->
|
||||
<div class="doctor-card">
|
||||
<img src="doctor.jpg" width="110" height="160" alt="ФИО" />
|
||||
<div class="doctor-info">
|
||||
<h3>Иванова Анна Сергеевна</h3>
|
||||
<p class="specialty">Оториноларинголог, высшая категория</p>
|
||||
<p class="experience">Стаж 18 лет</p>
|
||||
<button class="bb-btn bb-btn-sm bb-btn-outline">Записаться</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/* CSS с сайта oclinica.ru */
|
||||
.doctor .image { float:left; margin-right:20px; width:110px; height:160px; }
|
||||
.doctor .item { float:left; width:170px; }
|
||||
.doctor h3 { margin-top:0; height:32px; }`;
|
||||
|
||||
const codeNewsCard = `<!-- Карточка новости (сайт: 200×200px) -->
|
||||
<div class="news-card">
|
||||
<div class="news-preview">...</div>
|
||||
<div class="news-body">
|
||||
<time>15 марта 2026</time>
|
||||
<h3>Заголовок новости</h3>
|
||||
<p>Краткий анонс...</p>
|
||||
<a href="#">Читать далее →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/* CSS с сайта */
|
||||
#block-views-last-news-block-1 .views-column {
|
||||
background: #fff; width: 200px; height: 200px;
|
||||
margin: 15px 8px; padding: 15px;
|
||||
}
|
||||
#block-views-last-news-block-1 .views-column:hover {
|
||||
background: #eef4d1;
|
||||
box-shadow: 0px 0px 16px 0px #9e9e9a;
|
||||
}`;
|
||||
|
||||
const codeReviewCard = `<!-- Карточка отзыва -->
|
||||
<div class="review-card">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="text">Текст отзыва (4 строки, overflow: hidden)...</p>
|
||||
<div class="author">
|
||||
<span>Елена К.</span>
|
||||
<time>15 марта 2026</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/* Стиль брендбука (фон из CSS сайта) */
|
||||
.review-card { background: #eef4d1; border-radius: 12px; padding: 20px; }`;
|
||||
|
||||
const codePriceCard = `<!-- Карточка цены -->
|
||||
<div class="price-card">
|
||||
<div class="price-row">
|
||||
<span class="service">Первичный приём ЛОР-врача</span>
|
||||
<strong class="price">1 500 ₽</strong>
|
||||
</div>
|
||||
<p class="description">Включает осмотр и консультацию</p>
|
||||
<button class="bb-btn bb-btn-sm bb-btn-outline">Записаться</button>
|
||||
</div>`;
|
||||
|
||||
const codeBadges = `<!-- Бейджи -->
|
||||
<span class="bb-badge bb-badge-primary">ЛОР</span>
|
||||
<span class="bb-badge bb-badge-success">Принимает</span>
|
||||
<span class="bb-badge bb-badge-warning">Ожидает</span>
|
||||
<span class="bb-badge bb-badge-danger">Не принимает</span>
|
||||
<span class="bb-badge bb-badge-neutral">Высшая категория</span>
|
||||
|
||||
<!-- Теги -->
|
||||
<button class="bb-tag">Ухо</button>
|
||||
<button class="bb-tag">Горло</button>
|
||||
<button class="bb-tag bb-tag-active">Нос</button>
|
||||
|
||||
<!-- Алерт -->
|
||||
<div class="bb-alert bb-alert-info">
|
||||
<span class="bb-alert-icon">ℹ</span>
|
||||
<div>
|
||||
<strong>Запись открыта</strong>
|
||||
<p>Вы можете записаться онлайн или по телефону.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default function CardsPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-2" style={{ color: "var(--brand-053m)" }}>
|
||||
Компоненты → 3.3
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Карточки
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Карточки врача, новости, отзыва, цены и услуги — основные блоки контента сайта.
|
||||
Бейджи, теги и алерты — вспомогательные элементы.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 1. Карточки врачей */}
|
||||
<Section
|
||||
id="doctor"
|
||||
title="Карточка врача"
|
||||
subtitle="Фото 110×160px, имя, специализация, стаж, кнопка записи. Соответствует .doctor на сайте."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{DOCTORS.map(d => <DoctorCard key={d.name} {...d} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 2. Карточки новостей */}
|
||||
<Section
|
||||
id="news"
|
||||
title="Карточка новости"
|
||||
subtitle="Hover: bg #eef4d1 + box-shadow. Источник: #block-views-last-news-block-1 на сайте."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<NewsCard
|
||||
date="15 марта 2026"
|
||||
category="ЛОР"
|
||||
title="Как правильно промывать нос при насморке"
|
||||
snippet="Промывание носа — эффективный метод лечения и профилактики острого ринита. Рассказываем о правильной технике."
|
||||
/>
|
||||
<NewsCard
|
||||
date="10 марта 2026"
|
||||
category="Аудиология"
|
||||
title="Новый слуховой аппарат в нашей клинике"
|
||||
snippet="Мы начали подбор и настройку слуховых аппаратов нового поколения — незаметных и точных."
|
||||
/>
|
||||
<NewsCard
|
||||
date="5 марта 2026"
|
||||
title="Весенняя профилактика ЛОР-заболеваний"
|
||||
snippet="Апрель — период обострений. Рекомендации нашего специалиста по укреплению иммунитета и защите."
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-3 text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
* Наведите на карточку чтобы увидеть hover-эффект
|
||||
</p>
|
||||
</Section>
|
||||
|
||||
{/* 3. Карточки отзывов */}
|
||||
<Section
|
||||
id="review"
|
||||
title="Карточка отзыва"
|
||||
subtitle="Рейтинг (1–5 звёзд), текст 4 строки, автор, дата, врач. Фон #eef4d1 — с реального сайта."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{REVIEWS.map(r => <ReviewCard key={r.author} {...r} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 4. Карточки цен */}
|
||||
<Section
|
||||
id="price"
|
||||
title="Карточка цены"
|
||||
subtitle="Услуга + стоимость + описание + кнопка. Highlighted-вариант для акционных позиций."
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
{PRICES.map(p => <PriceCard key={p.service} {...p} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 5. Карточки услуг */}
|
||||
<Section
|
||||
id="service"
|
||||
title="Карточка услуги"
|
||||
subtitle="Иконка + заголовок + описание + ссылка. Применяется в блоке «Наши услуги»."
|
||||
>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{SERVICES.map(s => <ServiceCard key={s.title} {...s} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 6. Бейджи и теги */}
|
||||
<Section
|
||||
id="badges"
|
||||
title="Бейджи и теги"
|
||||
subtitle="Статусные бейджи, теги-категории, алерты."
|
||||
>
|
||||
{/* Бейджи */}
|
||||
<div className="mb-8">
|
||||
<p className="text-sm font-medium mb-3" style={{ color: "var(--bb-text)" }}>Бейджи (статус)</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ label: "Основной", bg: "var(--brand-053m)", color: "#fff" },
|
||||
{ label: "Принимает", bg: "#059669", color: "#fff" },
|
||||
{ label: "Высшая категория", bg: "#d97706", color: "#fff" },
|
||||
{ label: "Не принимает", bg: "#dc2626", color: "#fff" },
|
||||
{ label: "Нейтральный", bg: "#6b7280", color: "#fff" },
|
||||
{ label: "Новинка", bg: "#dff0fa", color: "var(--brand-053m)" },
|
||||
].map(b => (
|
||||
<span
|
||||
key={b.label}
|
||||
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
|
||||
style={{ background: b.bg, color: b.color }}
|
||||
>
|
||||
{b.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Теги */}
|
||||
<div className="mb-8">
|
||||
<p className="text-sm font-medium mb-3" style={{ color: "var(--bb-text)" }}>Теги (категории)</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Ухо", "Горло", "Нос", "Аудиология", "Детский ЛОР", "Хирургия"].map((tag, i) => (
|
||||
<button
|
||||
key={tag}
|
||||
className="inline-flex items-center px-3 py-1 rounded text-xs font-medium border transition-colors"
|
||||
style={
|
||||
i === 0
|
||||
? { background: "var(--brand-053m)", color: "#fff", borderColor: "var(--brand-053m)" }
|
||||
: { background: "#fff", color: "var(--bb-text)", borderColor: "var(--bb-border)" }
|
||||
}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Алерты */}
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-3" style={{ color: "var(--bb-text)" }}>Алерты</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
{[
|
||||
{ type: "info", bg: "#dff0fa", color: "#075985", icon: "ℹ", title: "Информация", text: "Запись открыта. Вы можете записаться онлайн или по телефону." },
|
||||
{ type: "success", bg: "#d1fae5", color: "#065f46", icon: "✓", title: "Успешно", text: "Ваша запись подтверждена. Ждём вас 20 марта в 10:00." },
|
||||
{ type: "warning", bg: "#fef3c7", color: "#92400e", icon: "⚠", title: "Внимание", text: "Не забудьте взять паспорт и полис ОМС на приём." },
|
||||
{ type: "error", bg: "#fee2e2", color: "#991b1b", icon: "✕", title: "Ошибка", text: "К сожалению, это время уже занято. Выберите другое." },
|
||||
].map(a => (
|
||||
<div
|
||||
key={a.type}
|
||||
className="flex gap-3 p-4 rounded-xl border"
|
||||
style={{ background: a.bg, borderColor: a.bg, color: a.color }}
|
||||
>
|
||||
<span className="text-base font-bold shrink-0 mt-0.5">{a.icon}</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold mb-0.5">{a.title}</p>
|
||||
<p className="text-sm opacity-90">{a.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 7. Код */}
|
||||
<Section
|
||||
id="code"
|
||||
title="Примеры кода"
|
||||
subtitle="HTML-структура и CSS-справка."
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<CodeCopy lang="HTML — DoctorCard + CSS с сайта" code={codeDoctorCard} />
|
||||
<CodeCopy lang="HTML — NewsCard + CSS с сайта" code={codeNewsCard} />
|
||||
<CodeCopy lang="HTML — ReviewCard" code={codeReviewCard} />
|
||||
<CodeCopy lang="HTML — PriceCard" code={codePriceCard} />
|
||||
<CodeCopy lang="HTML — Badges, Tags, Alerts" code={codeBadges} />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* LLM-блок */}
|
||||
<LlmBlock path="/components/cards" version="v1.0" specText={LLM_CARDS_TEXT}>
|
||||
<LlmSection title="Типы карточек" />
|
||||
<LlmTable
|
||||
headers={["Карточка", "Ключевые размеры", "Источник на сайте", "Фон / hover"]}
|
||||
rows={[
|
||||
["DoctorCard", "фото 110×160px, layout: flex", ".doctor .image + .doctor .item", "#fff / —"],
|
||||
["NewsCard", "preview h=144px, grid 3 col", "#block-views-last-news-block-1 .views-column", "#fff / #eef4d1 + shadow"],
|
||||
["ReviewCard", "4 строки текста, рейтинг", ".node-reviews", "#eef4d1 / —"],
|
||||
["PriceCard", "flex row: name + price", ".field-name-field-price-priem", "#fff / highlighted: #f0f9ff"],
|
||||
["ServiceCard", "иконка 48×48, grid 4 col", "—", "#fff / shadow"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Бейджи, теги, алерты" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Варианты", "Размер", "Применение"]}
|
||||
rows={[
|
||||
["Badge", "primary / success / warning / danger / neutral", "text-xs, px-2.5, rounded-full", "Статус врача, категория, акция"],
|
||||
["Tag", "default / active", "text-xs, px-3, rounded-4px", "Фильтры, категории услуг"],
|
||||
["Alert", "info / success / warning / error", "p-4, border-radius 12px", "Системные сообщения пользователю"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила применения" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "DoctorCard: всегда фото-placeholder если нет фото" },
|
||||
{ ok: true, text: "NewsCard: hover #eef4d1 + box-shadow (из реального CSS сайта)" },
|
||||
{ ok: true, text: "ReviewCard: обрезать текст после 4 строк (WebkitLineClamp: 4)" },
|
||||
{ ok: true, text: "PriceCard highlighted = акционная / рекомендуемая позиция" },
|
||||
{ ok: true, text: "Alert: один тип одновременно на экране" },
|
||||
{ ok: false, text: "Не смешивать типы карточек в одной сетке без заголовка" },
|
||||
{ ok: false, text: "Не использовать ReviewCard без рейтинга" },
|
||||
{ ok: false, text: "Не ставить более 3 бейджей рядом" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -162,6 +162,13 @@ body {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Карточки (Sprint 4) ────────────────────────────────────── */
|
||||
.bb-news-card:hover {
|
||||
background: #eef4d1 !important;
|
||||
box-shadow: 0 0 16px 0 #9e9e9a;
|
||||
}
|
||||
.bb-service-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
|
||||
/* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
|
||||
.bb-toggle-track {
|
||||
display: inline-flex;
|
||||
|
||||
Reference in New Issue
Block a user