55 lines
4.9 KiB
Markdown
55 lines
4.9 KiB
Markdown
# `components/` — структура компонентов
|
|
|
|
Разделение на две папки следует общей логике: `sections/` — это "что видит
|
|
пользователь", `ui/` — это "из чего это собрано".
|
|
|
|
## `sections/` — крупные самодостаточные блоки страниц
|
|
|
|
Каждый компонент здесь обычно закрывает целую секцию страницы или целый экран.
|
|
Получают переведённые строки как проп `dict` (кусок словаря `Dictionary` из
|
|
`lib/IDict.ts`, соответствующий одной секции — `dict.hero`, `dict.pricing` и т.д.),
|
|
а не читают словарь сами — словарь грузится один раз в `page.tsx`/`layout.tsx` и
|
|
раздаётся вниз. Часть секций — серверные компоненты, которые сами ходят в PocketBase
|
|
(`Faq.tsx`, `BlogPreview.tsx`), часть — клиентские с интерактивностью и анимациями
|
|
на `framer-motion` (`Hero.tsx`, `Pricing.tsx`, `TerminalGuestbook.tsx` и т.д.).
|
|
|
|
Ключевые секции:
|
|
|
|
- **`Header.tsx`** — фиксированная плавающая навигация + полноэкранное меню-оверлей
|
|
в стиле ретро-Windows-окна.
|
|
- **`Hero.tsx`** — первый экран главной страницы с WASM-анимацией матрицы
|
|
(`matrix-engine/`) и переключателем "VPN вкл/выкл", который меняет визуальное
|
|
состояние фона.
|
|
- **`Features.tsx`** — bento-грид с описанием ключевых возможностей продукта.
|
|
- **`Pricing.tsx`** — тарифные планы из PocketBase с переключением периода оплаты
|
|
(1 месяц / 6 месяцев / 1 год) и автоматическим пересчётом скидки.
|
|
- **`Faq.tsx`** — аккордеон вопросов-ответов, серверный компонент с ISR-кэшем на сутки.
|
|
- **`TerminalGuestbook.tsx`** — гостевая книга на главной странице: форма с
|
|
honeypot-полем от ботов, клиентский троттлинг + серверный кулдаун, realtime через
|
|
PocketBase-подписку, отправка через Rust-шлюз `proxy-ws` (модерация на бэкенде).
|
|
- **`BlogPreview.tsx`** — превью последних постов блога на главной странице.
|
|
- **`SpeedtestClient.tsx`** — измеритель скорости соединения (пинг/скачивание/отдача)
|
|
через `proxy-ws`; в dev-режиме работает в моковом режиме без реальных запросов.
|
|
- **`Footer.tsx`** — подвал сайта с картой ссылок и "мерцающими" неоновыми иконками
|
|
соцсетей.
|
|
- **`lang/language-switcher.tsx`** — переключатель локали en/ru (подменяет префикс
|
|
в текущем пути и делает `router.push`).
|
|
- **`theme/theme-provider.tsx`** + **`theme/theme-toggle.tsx`** — обвязка над
|
|
`next-themes` для переключения светлой/тёмной темы.
|
|
|
|
## `ui/` — низкоуровневые примитивы дизайн-системы
|
|
|
|
Компоненты без сложной бизнес-логики и без состояния приложения — переиспользуемые
|
|
строительные блоки в стиле shadcn/radix: `accordion.tsx`, `badge.tsx`, `button.tsx`,
|
|
`card.tsx`, `dropdown-menu.tsx`, `switch.tsx`. Это стандартная генерация shadcn CLI,
|
|
почти без кастомизации — при обновлении дизайн-системы их обычно переустанавливают
|
|
через `npx shadcn add`, а не правят руками.
|
|
|
|
Исключение — **`cyber-button.tsx`**: кастомный акцентный элемент темы проекта,
|
|
не из shadcn. Кнопка со скобками-маркерами `</ ... />` вокруг текста и бегущим
|
|
бликом при ховере, два варианта (`primary` — заливка фиолетовым, `secondary` —
|
|
прозрачная с цановой обводкой), может рендериться и как `<Link>`, и как `<button>`.
|
|
Используется практически во всех местах с призывом к действию (Header, Hero,
|
|
Pricing, TerminalGuestbook, SpeedtestClient и т.д.) вместо стандартного `Button` —
|
|
это основной акцентный элемент "хакерской" темы проекта.
|