Sergey Krylov
aac5b2f873
All checks were successful
- Create apps/docs/ with Docusaurus 3.7.0 - Add documentation: architecture, backend, frontend, infrastructure, development, ADR - Include 5 Mermaid diagrams (system architecture, request flow, modules, caching, deployment) - Configure as npm workspace with dev:docs/build:docs scripts - Copy existing ADR documents from docs/architecture/adr/
41 lines
1.8 KiB
Markdown
41 lines
1.8 KiB
Markdown
# Components
|
||
|
||
## Layout (`components/Layout.tsx`)
|
||
|
||
Базовый layout с шапкой и `<Outlet />`.
|
||
|
||
- Шапка: логотип "MoexVibe" (ссылка на `/`) + `SearchBar`
|
||
- Основной контент: max-width 1200px, padding 24px
|
||
|
||
## SearchBar (`components/SearchBar.tsx`)
|
||
|
||
Поиск инструментов с debounce (300ms).
|
||
|
||
- Вызывает `useSearch(debounced)` при вводе 2+ символов
|
||
- Показывает выпадающий список результатов
|
||
- При клике на результат переходит на `/stocks/:secid` или `/bonds/:secid`
|
||
- Закрывается при клике вне компонента
|
||
|
||
## PriceChart (`components/PriceChart.tsx`)
|
||
|
||
График цены на основе `lightweight-charts` v4.
|
||
|
||
- Принимает массив свечей: `{ open, high, low, close, begin }`
|
||
- Высота по умолчанию: 400px
|
||
- Цвета: зелёный для роста, красный для падения
|
||
- Адаптивная ширина (resize listener)
|
||
|
||
## StockDetails (`components/StockDetails.tsx`)
|
||
|
||
Карточка с информацией об акции.
|
||
|
||
- Принимает `ShareResponse`
|
||
- Отображает: название, тикер, ISIN, цена, изменение (%), open/high/low, объём, капитализация, уровень листинга
|
||
|
||
## BondDetails (`components/BondDetails.tsx`)
|
||
|
||
Карточка с информацией об облигации.
|
||
|
||
- Принимает `BondResponse`
|
||
- Отображает: название, ISIN, цена (в % от номинала), номинал, дата погашения, купон (сумма/%), период купона, НКД, доходность к погашению, дюрация, тип
|