arazor72
/
brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(preview): add NavigationBlock component, show header in preview 

NavigationBlock extracted from navigation/page.tsx into reusable component.
Preview now shows real header (ready: true) as first block — 3 of 8 ready.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
main
AR 15 M4 1 week ago
parent
be37ae2508
commit
c8217cfc2f
3 changed files with 89 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      apps/web/app/components/navigation/page.tsx
  2. 4
      apps/web/app/pages/preview/PreviewClient.tsx
  3. 83
      apps/web/components/blocks/NavigationBlock.tsx

81
apps/web/app/components/navigation/page.tsx
Unescape View File

@ -1,21 +1,11 @@
import type { Metadata } from "next";
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
import { NavigationBlock, NAV_ITEMS } from "@/components/blocks/NavigationBlock";
export const metadata: Metadata = {
title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
};
const NAV_ITEMS = [
"Клиника",
"ЛОР врачи",
"Заболевания",
"Вопрос-ответ",
"ЛОР-операции",
"Сурдология",
"Цены",
"Контакты",
];
const LLM_NAV_TEXT = `
БЛОК: Шапка и навигация сайта (Header)
Источник: perm.oclinica.ru/lor — реальная шапка сайта
@ -77,73 +67,8 @@ export default function NavigationPage() {
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
Живой пример
</h2>
<div
className="rounded-xl overflow-hidden"
style={{ border: "1px solid var(--bb-border)", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
>
{/* Топ-бар */}
<div
className="flex items-center justify-between px-6 py-2 text-xs border-b"
style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
>
<div className="flex items-center gap-4">
<span>📍 Б. Цитная, 3</span>
<a href="#" style={{ color: "#0089c3" }}>
Клиника ухо горло нос и аллергия
</a>
<a href="#" style={{ color: "#0089c3" }}>
Центр аллергологии и пульмонологии
</a>
</div>
<div className="flex items-center gap-4">
<span className="font-bold text-sm" style={{ color: "#111827" }}>
/342/ 255-53-84
</span>
<button className="bb-btn bb-btn-sm bb-btn-pill">Заказать звонок</button>
</div>
</div>
{/* Логотип */}
<div className="flex items-center px-6 py-3 bg-white">
<div className="flex items-center gap-3">
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-lg shrink-0"
style={{ background: "#0089c3" }}
>
✚
</div>
<div>
<div
className="text-[11px] font-bold leading-tight uppercase tracking-wide"
style={{ color: "#53514e" }}
>
Клиника<br />ухо, горло, нос
</div>
<div className="text-[9px] leading-tight mt-0.5" style={{ color: "#9ca3af" }}>
им. проф. Е.Н.Оленевой
</div>
</div>
</div>
</div>
{/* Навигация */}
<nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
{NAV_ITEMS.map((item, i) => (
<a
key={item}
href="#"
className="px-4 py-3 text-sm bb-nav-link whitespace-nowrap"
style={{
color: i === 0 ? "#0089c3" : "#53514e",
borderRight: "1px solid #f3f4f6",
fontWeight: i === 0 ? 500 : 400,
textDecoration: "none",
}}
>
{item}
</a>
))}
</nav>
<div className="rounded-xl overflow-hidden">
<NavigationBlock />
</div>
</section>

4
apps/web/app/pages/preview/PreviewClient.tsx
Unescape View File

@ -1,6 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import { NavigationBlock } from "@/components/blocks/NavigationBlock";
import { HeroBlock } from "@/components/blocks/HeroBlock";
import { DoctorsBlock } from "@/components/blocks/DoctorsBlock";
@ -40,7 +41,8 @@ const BLOCKS: Array<{
id: "navigation",
name: "Шапка / Навигация",
href: "/components/navigation",
ready: false,
ready: true,
component: <NavigationBlock />,
},
{
id: "hero",

83
apps/web/components/blocks/NavigationBlock.tsx
Unescape View File

@ -0,0 +1,83 @@
export const NAV_ITEMS = [
"Клиника",
"ЛОР врачи",
"Заболевания",
"Вопрос-ответ",
"ЛОР-операции",
"Сурдология",
"Цены",
"Контакты",
];
export function NavigationBlock() {
return (
<div
className="overflow-hidden"
style={{ border: "1px solid #e5e7eb", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
>
{/* Топ-бар */}
<div
className="flex items-center justify-between px-6 py-2 text-xs border-b"
style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
>
<div className="flex items-center gap-4">
<span>📍 Б. Цитная, 3</span>
<a href="#" style={{ color: "#0089c3" }}>
Клиника ухо горло нос и аллергия
</a>
<a href="#" style={{ color: "#0089c3" }}>
Центр аллергологии и пульмонологии
</a>
</div>
<div className="flex items-center gap-4">
<span className="font-bold text-sm" style={{ color: "#111827" }}>
/342/ 255-53-84
</span>
<button className="bb-btn bb-btn-sm bb-btn-pill">Заказать звонок</button>
</div>
</div>
{/* Логотип */}
<div className="flex items-center px-6 py-3 bg-white">
<div className="flex items-center gap-3">
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-lg shrink-0"
style={{ background: "#0089c3" }}
>
✚
</div>
<div>
<div
className="text-[11px] font-bold leading-tight uppercase tracking-wide"
style={{ color: "#53514e" }}
>
Клиника<br />ухо, горло, нос
</div>
<div className="text-[9px] leading-tight mt-0.5" style={{ color: "#9ca3af" }}>
им. проф. Е.Н.Оленевой
</div>
</div>
</div>
</div>
{/* Главное меню */}
<nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
{NAV_ITEMS.map((item, i) => (
<a
key={item}
href="#"
className="px-4 py-3 text-sm whitespace-nowrap"
style={{
color: i === 0 ? "#0089c3" : "#53514e",
borderRight: "1px solid #f3f4f6",
fontWeight: i === 0 ? 500 : 400,
textDecoration: "none",
}}
>
{item}
</a>
))}
</nav>
</div>
);
}
Write Preview
Loading…
Cancel
Save