Sergey Krylov
9932278b64
- Delete shared/api/responses.ts, move type re-exports to index.ts - Update all 55+ imports from shared/api/responses to shared/api - Delete stale client.test.ts (tested deleted client.ts) - Run biome checks and fix import ordering - Update tasks.md and plan.md to reflect actual approach
86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import type { ShareResponse } from '@/shared/api'
|
||
|
||
interface StockDetailsProps {
|
||
stock: ShareResponse
|
||
}
|
||
|
||
const rowStyle: React.CSSProperties = {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
padding: '8px 0',
|
||
borderBottom: '1px solid #eee',
|
||
}
|
||
|
||
export function StockDetails({ stock }: StockDetailsProps) {
|
||
const md = stock.marketData
|
||
const change = md.change ?? 0
|
||
const changePercent = md.changePercent ?? 0
|
||
const isPositive = change >= 0
|
||
const changeLabel = `${isPositive ? '+' : ''}${change.toFixed(2)} (${changePercent.toFixed(2)}%)`
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
background: 'var(--color-surface)',
|
||
borderRadius: 'var(--border-radius)',
|
||
boxShadow: 'var(--shadow)',
|
||
padding: 24,
|
||
}}
|
||
>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<h2 style={{ fontSize: 28, fontWeight: 700 }}>
|
||
{stock.shortName} ({stock.secid})
|
||
</h2>
|
||
<div style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>
|
||
{stock.name} · {stock.isin}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ fontSize: 36, fontWeight: 700, marginBottom: 4 }}>
|
||
{md.price?.toLocaleString('ru-RU', { minimumFractionDigits: 2 }) ?? '—'}{' '}
|
||
<span
|
||
style={{
|
||
fontSize: 18,
|
||
color: isPositive ? 'var(--color-positive)' : 'var(--color-negative)',
|
||
}}
|
||
>
|
||
{changeLabel}
|
||
</span>
|
||
</div>
|
||
|
||
<div style={{ marginTop: 16 }}>
|
||
<div style={rowStyle}>
|
||
<span>Открытие</span>
|
||
<span>{md.open?.toFixed(2) ?? '—'}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Максимум</span>
|
||
<span>{md.high?.toFixed(2) ?? '—'}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Минимум</span>
|
||
<span>{md.low?.toFixed(2) ?? '—'}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Объём</span>
|
||
<span>{md.volume.toLocaleString('ru-RU')}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Капитализация</span>
|
||
<span>
|
||
{md.issueCapitalization ? `${(md.issueCapitalization / 1e9).toFixed(2)} млрд ₽` : '—'}
|
||
</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>ISIN</span>
|
||
<span>{stock.isin}</span>
|
||
</div>
|
||
<div style={rowStyle}>
|
||
<span>Уровень листинга</span>
|
||
<span>{stock.listLevel}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|