Browse Source
- New route /pages/preview with empty state ("Создать") and assembled preview
- Preview assembles real site blocks in order (Hero + Doctors ready, rest placeholders)
- localStorage persists created state; "Пересобрать" resets it
- Extracted HeroBlock and DoctorsBlock as reusable components
- Refactored hero and doctors pages to import from components/blocks/
- Sidebar: added "Просмотр страницы" link, bumped to Sprint 5.5 · v0.5.5
- SPRINTS.md: added Sprint 5.5 plan with summary table row
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
main
AR 15 M4
1 week ago
8 changed files with 496 additions and 222 deletions
@ -0,0 +1,200 @@ |
|||||||
|
"use client"; |
||||||
|
|
||||||
|
import { useState, useEffect } from "react"; |
||||||
|
import { HeroBlock } from "@/components/blocks/HeroBlock"; |
||||||
|
import { DoctorsBlock } from "@/components/blocks/DoctorsBlock"; |
||||||
|
|
||||||
|
const STORAGE_KEY = "bb-preview-created"; |
||||||
|
|
||||||
|
function BlockPlaceholder({ name, href }: { name: string; href: string }) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="w-full py-14 flex flex-col items-center justify-center rounded-xl gap-2" |
||||||
|
style={{ |
||||||
|
border: "2px dashed #d1d5db", |
||||||
|
background: "#f9fafb", |
||||||
|
}} |
||||||
|
> |
||||||
|
<p className="text-sm font-medium" style={{ color: "#6b7280" }}> |
||||||
|
{name} |
||||||
|
</p> |
||||||
|
<a |
||||||
|
href={href} |
||||||
|
className="text-xs underline" |
||||||
|
style={{ color: "var(--brand-053m)" }} |
||||||
|
> |
||||||
|
Открыть в брендбуке → |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const BLOCKS: Array<{ |
||||||
|
id: string; |
||||||
|
name: string; |
||||||
|
href: string; |
||||||
|
ready: boolean; |
||||||
|
component?: React.ReactNode; |
||||||
|
}> = [ |
||||||
|
{ |
||||||
|
id: "hero", |
||||||
|
name: "Hero-баннер", |
||||||
|
href: "/blocks/hero", |
||||||
|
ready: true, |
||||||
|
component: <HeroBlock />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "ceo", |
||||||
|
name: "Вводный текст (CEO-блок)", |
||||||
|
href: "/blocks/ceo", |
||||||
|
ready: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "doctors", |
||||||
|
name: "Наши врачи", |
||||||
|
href: "/blocks/doctors", |
||||||
|
ready: true, |
||||||
|
component: <DoctorsBlock />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "reviews", |
||||||
|
name: "Отзывы", |
||||||
|
href: "/blocks/reviews", |
||||||
|
ready: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "contact-forms", |
||||||
|
name: "Формы записи", |
||||||
|
href: "/blocks/contact-forms", |
||||||
|
ready: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "news", |
||||||
|
name: "Новости", |
||||||
|
href: "/blocks/news", |
||||||
|
ready: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "footer", |
||||||
|
name: "Подвал / Контакт", |
||||||
|
href: "/blocks/contact", |
||||||
|
ready: false, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const READY_COUNT = BLOCKS.filter((b) => b.ready).length; |
||||||
|
|
||||||
|
export function PreviewClient() { |
||||||
|
const [created, setCreated] = useState(false); |
||||||
|
const [mounted, setMounted] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setMounted(true); |
||||||
|
if (localStorage.getItem(STORAGE_KEY) === "true") { |
||||||
|
setCreated(true); |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
|
function handleCreate() { |
||||||
|
localStorage.setItem(STORAGE_KEY, "true"); |
||||||
|
setCreated(true); |
||||||
|
} |
||||||
|
|
||||||
|
function handleRebuild() { |
||||||
|
localStorage.removeItem(STORAGE_KEY); |
||||||
|
setCreated(false); |
||||||
|
} |
||||||
|
|
||||||
|
// Avoid hydration mismatch — render nothing until mounted
|
||||||
|
if (!mounted) return null; |
||||||
|
|
||||||
|
/* ── ПУСТОЕ СОСТОЯНИЕ ── */ |
||||||
|
if (!created) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="flex flex-col items-center justify-center min-h-screen" |
||||||
|
style={{ background: "var(--bb-bg)" }} |
||||||
|
> |
||||||
|
<div className="text-center max-w-md space-y-5 p-8"> |
||||||
|
<p |
||||||
|
className="text-xs font-semibold uppercase tracking-widest" |
||||||
|
style={{ color: "var(--brand-053m)" }} |
||||||
|
> |
||||||
|
Страницы |
||||||
|
</p> |
||||||
|
<h1 className="text-2xl font-bold" style={{ color: "var(--bb-text)" }}> |
||||||
|
Просмотр текущей страницы |
||||||
|
</h1> |
||||||
|
<p className="text-sm" style={{ color: "var(--bb-text-muted)", lineHeight: 1.7 }}> |
||||||
|
Нажмите «Создать», чтобы собрать главную страницу{" "} |
||||||
|
<span className="font-mono text-xs">perm.oclinica.ru/lor</span> из блоков, |
||||||
|
задокументированных в брендбуке. |
||||||
|
</p> |
||||||
|
<div |
||||||
|
className="flex items-center justify-center gap-2 text-xs px-4 py-2 rounded-lg" |
||||||
|
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }} |
||||||
|
> |
||||||
|
<span |
||||||
|
className="inline-block w-2 h-2 rounded-full" |
||||||
|
style={{ background: "#22c55e" }} |
||||||
|
/> |
||||||
|
<span style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
Готово блоков: {READY_COUNT} из {BLOCKS.length} |
||||||
|
</span> |
||||||
|
<span style={{ color: "var(--bb-text-muted)" }}>·</span> |
||||||
|
<span style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
{BLOCKS.length - READY_COUNT} плейсхолдеров |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<button onClick={handleCreate} className="bb-btn bb-btn-md bb-btn-primary"> |
||||||
|
Создать |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/* ── СОЗДАННОЕ СОСТОЯНИЕ ── */ |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{/* Топ-бар */} |
||||||
|
<div |
||||||
|
className="sticky top-0 z-10 flex items-center justify-between px-6 py-3 border-b" |
||||||
|
style={{ |
||||||
|
background: "var(--bb-sidebar-bg)", |
||||||
|
borderColor: "var(--bb-border)", |
||||||
|
}} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<p |
||||||
|
className="text-xs font-semibold uppercase tracking-widest" |
||||||
|
style={{ color: "var(--brand-053m)" }} |
||||||
|
> |
||||||
|
Просмотр текущей страницы |
||||||
|
</p> |
||||||
|
<p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}> |
||||||
|
perm.oclinica.ru/lor · {READY_COUNT}/{BLOCKS.length} блоков готово |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<button onClick={handleRebuild} className="bb-btn bb-btn-sm bb-btn-outline"> |
||||||
|
Пересобрать |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Собранная страница */} |
||||||
|
<div className="max-w-5xl mx-auto px-8 py-8 space-y-12"> |
||||||
|
{BLOCKS.map((block) => |
||||||
|
block.ready && block.component ? ( |
||||||
|
<section key={block.id}>{block.component}</section> |
||||||
|
) : ( |
||||||
|
<section key={block.id}> |
||||||
|
<BlockPlaceholder name={block.name} href={block.href} /> |
||||||
|
</section> |
||||||
|
) |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import type { Metadata } from "next"; |
||||||
|
import { PreviewClient } from "./PreviewClient"; |
||||||
|
|
||||||
|
export const metadata: Metadata = { |
||||||
|
title: |
||||||
|
"Просмотр текущей страницы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой", |
||||||
|
}; |
||||||
|
|
||||||
|
export default function PreviewPage() { |
||||||
|
return <PreviewClient />; |
||||||
|
} |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
export const STATS = [ |
||||||
|
{ num: "27", label: "ЛОР врачей работает в клинике", prefix: "Ежедневно" }, |
||||||
|
{ num: "6", label: "кандидатов медицинских наук", prefix: "В том числе" }, |
||||||
|
{ num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" }, |
||||||
|
]; |
||||||
|
|
||||||
|
export const DOCTORS = [ |
||||||
|
{ |
||||||
|
name: "Макарова Людмила Германовна", |
||||||
|
spec: "ЛОР врач, сурдолог", |
||||||
|
photo: "/doctors/makarova.jpg", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Семерикова Наталия Александровна", |
||||||
|
spec: "ЛОР врач, сурдолог, хирург. К.М.Н. Завед. Центром сурдологии", |
||||||
|
photo: "/doctors/semerikova.png", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Ворончихина Наталия Валерьевна", |
||||||
|
spec: "Отоневролог, хирург. К.М.Н., доцент кафедры ПГМУ", |
||||||
|
photo: "/doctors/voronchikhina.png", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Лобанова Ирина Юрьевна", |
||||||
|
spec: "ЛОР врач, сурдолог", |
||||||
|
photo: "/doctors/lobanova.jpg", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Торсунова Наталья Сергеевна", |
||||||
|
spec: "Специалист по слухопротезированию (сурдоакустик)", |
||||||
|
photo: "/doctors/torsunova.jpg", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Суворова Светлана Викторовна", |
||||||
|
spec: "ЛОР врач, сурдолог", |
||||||
|
photo: "/doctors/suvorova.jpg", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export function DoctorsBlock() { |
||||||
|
return ( |
||||||
|
<div className="space-y-8"> |
||||||
|
{/* Заголовок + описание */} |
||||||
|
<div> |
||||||
|
<h2 className="text-3xl font-bold mb-3" style={{ color: "#111827" }}> |
||||||
|
Приём ведут опытные ЛОР врачи |
||||||
|
</h2> |
||||||
|
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}> |
||||||
|
Фундаментальная теоретическая подготовка и большой практический опыт в сочетании |
||||||
|
с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Статистика — без фона, border-bottom #60959c */} |
||||||
|
<div className="grid grid-cols-3 gap-6"> |
||||||
|
{STATS.map((s) => ( |
||||||
|
<div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}> |
||||||
|
<p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}> |
||||||
|
{s.prefix} {s.num} {s.label} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Сетка врачей — 6 колонок */} |
||||||
|
<div className="grid grid-cols-6 gap-3"> |
||||||
|
{DOCTORS.map((doc) => ( |
||||||
|
<div key={doc.name} className="flex flex-col items-center text-center gap-1.5"> |
||||||
|
{/* eslint-disable-next-line @next/next/no-img-element */} |
||||||
|
<img |
||||||
|
src={doc.photo} |
||||||
|
alt={doc.name} |
||||||
|
style={{ |
||||||
|
width: 110, |
||||||
|
height: 150, |
||||||
|
objectFit: "cover", |
||||||
|
objectPosition: "center top", |
||||||
|
borderRadius: 4, |
||||||
|
display: "block", |
||||||
|
}} |
||||||
|
/> |
||||||
|
<div> |
||||||
|
<p className="text-xs font-medium leading-snug" style={{ color: "#60959c" }}> |
||||||
|
{doc.name} |
||||||
|
</p> |
||||||
|
<p className="text-[11px] mt-0.5 leading-snug" style={{ color: "#374151" }}> |
||||||
|
{doc.spec} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,101 @@ |
|||||||
|
export const HERO_CHECKS = [ |
||||||
|
{ key: "БЕЗОПАСНО", desc: "оперируют хирурги с 15-летним опытом работы" }, |
||||||
|
{ key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ", desc: "хирургия сверхмалых размеров" }, |
||||||
|
{ key: "БЫСТРО", desc: "под наблюдением врача пациент находится 1 сутки" }, |
||||||
|
]; |
||||||
|
|
||||||
|
export function HeroBlock() { |
||||||
|
return ( |
||||||
|
<div className="space-y-3"> |
||||||
|
{/* H1 страницы */} |
||||||
|
<h2 |
||||||
|
className="text-xl font-bold leading-snug" |
||||||
|
style={{ color: "#53514e" }} |
||||||
|
> |
||||||
|
ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых |
||||||
|
</h2> |
||||||
|
|
||||||
|
{/* Баннер — единый светло-кремовый фон */} |
||||||
|
<div |
||||||
|
className="rounded-xl overflow-hidden flex" |
||||||
|
style={{ background: "#f9f4e7", minHeight: 280 }} |
||||||
|
> |
||||||
|
{/* Левая часть — контент */} |
||||||
|
<div |
||||||
|
className="flex flex-col justify-center gap-5 p-8" |
||||||
|
style={{ width: "50%", flexShrink: 0 }} |
||||||
|
> |
||||||
|
<p |
||||||
|
className="text-base font-bold uppercase leading-snug" |
||||||
|
style={{ color: "#111827" }} |
||||||
|
> |
||||||
|
Эндоскопическое хирургическое лечение ЛОР органов |
||||||
|
</p> |
||||||
|
<ul className="space-y-3"> |
||||||
|
{HERO_CHECKS.map((c) => ( |
||||||
|
<li key={c.key} className="flex items-start gap-2 text-sm"> |
||||||
|
<span |
||||||
|
className="shrink-0 font-bold" |
||||||
|
style={{ color: "#bf9975", marginTop: 1 }} |
||||||
|
> |
||||||
|
✓ |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<span className="font-bold uppercase" style={{ color: "#111827" }}> |
||||||
|
{c.key} |
||||||
|
</span>{" "} |
||||||
|
<span style={{ color: "#374151" }}>– {c.desc}</span> |
||||||
|
</span> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
<div> |
||||||
|
<button className="bb-btn bb-btn-md bb-btn-outline"> |
||||||
|
Узнать стоимость операции |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Правая часть — фото врача */} |
||||||
|
<div className="flex-1 relative overflow-hidden" style={{ minHeight: 280 }}> |
||||||
|
{/* eslint-disable-next-line @next/next/no-img-element */} |
||||||
|
<img |
||||||
|
src="/hero-doctor.jpg" |
||||||
|
alt="Врач на приёме с пациентом" |
||||||
|
style={{ |
||||||
|
width: "100%", |
||||||
|
height: "100%", |
||||||
|
objectFit: "cover", |
||||||
|
objectPosition: "center top", |
||||||
|
position: "absolute", |
||||||
|
inset: 0, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Под баннером: соцсети + просмотры */} |
||||||
|
<div className="flex items-center gap-3 pt-1"> |
||||||
|
<span className="text-xs" style={{ color: "#9ca3af" }}> |
||||||
|
Поделиться: |
||||||
|
</span> |
||||||
|
{["VK", "FB", "TW"].map((s) => ( |
||||||
|
<button |
||||||
|
key={s} |
||||||
|
className="text-xs px-2 py-1 rounded" |
||||||
|
style={{ |
||||||
|
background: "#f9fafb", |
||||||
|
border: "1px solid #e5e7eb", |
||||||
|
color: "#9ca3af", |
||||||
|
}} |
||||||
|
> |
||||||
|
{s} |
||||||
|
</button> |
||||||
|
))} |
||||||
|
<span className="text-xs ml-2" style={{ color: "#9ca3af" }}> |
||||||
|
👁 98 573 просмотра |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue