98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { Heading } from '@moex-vibe/design-system'
|
|
import { Box } from '@mui/material'
|
|
import type { UseQueryResult } from '@tanstack/react-query'
|
|
import { Link, useParams } from '@tanstack/react-router'
|
|
import { createContext, type ReactNode } from 'react'
|
|
import { useBrokerPortfolio } from '@/entities/broker-account'
|
|
import type { BrokerPortfolio } from '@/shared/api'
|
|
|
|
const baseLinkStyle: React.CSSProperties = {
|
|
padding: '10px 12px',
|
|
borderRadius: 8,
|
|
color: 'var(--color-text-secondary)',
|
|
textDecoration: 'none',
|
|
whiteSpace: 'nowrap',
|
|
flexShrink: 0,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
fontSize: 14,
|
|
}
|
|
|
|
const links = [
|
|
{ to: '', label: 'Обзор' },
|
|
{ to: '/shares', label: 'Акции' },
|
|
{ to: '/bonds', label: 'Облигации' },
|
|
{ to: '/operations', label: 'Операции' },
|
|
{ to: '/events', label: 'События' },
|
|
]
|
|
|
|
export interface BrokerAccountContextValue {
|
|
accountId: string
|
|
portfolio: UseQueryResult<BrokerPortfolio>
|
|
}
|
|
|
|
export const BrokerAccountContext = createContext<BrokerAccountContextValue | null>(null)
|
|
|
|
export function BrokerAccountLayout({ children }: { children: ReactNode }) {
|
|
const { accountId = '' } = useParams({ from: '/broker/$accountId' })
|
|
const portfolio = useBrokerPortfolio(accountId)
|
|
const basePath = `/broker/${encodeURIComponent(accountId)}`
|
|
|
|
return (
|
|
<BrokerAccountContext.Provider value={{ accountId, portfolio }}>
|
|
<Box sx={{ display: 'grid', gap: 3 }}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
|
<Heading level={1}>{portfolio.data?.account.name || 'Брокерский счёт'}</Heading>
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr',
|
|
gap: 2,
|
|
'@media (min-width: 720px)': {
|
|
gridTemplateColumns: 'minmax(150px, 190px) minmax(0, 1fr)',
|
|
gap: 3,
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
component="nav"
|
|
aria-label="Разделы брокерского счёта"
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 0.5,
|
|
'@media (max-width: 719px)': {
|
|
flexDirection: 'row',
|
|
overflowX: 'auto',
|
|
scrollbarWidth: 'thin',
|
|
},
|
|
}}
|
|
>
|
|
{links.map((link) => (
|
|
<Link
|
|
key={link.to}
|
|
to={`${basePath}${link.to}`}
|
|
style={baseLinkStyle}
|
|
activeOptions={{ exact: link.to === '' }}
|
|
activeProps={{
|
|
style: {
|
|
...baseLinkStyle,
|
|
color: 'var(--color-primary)',
|
|
fontWeight: 700,
|
|
},
|
|
}}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</Box>
|
|
|
|
<Box sx={{ minWidth: 0 }}>{children}</Box>
|
|
</Box>
|
|
</Box>
|
|
</BrokerAccountContext.Provider>
|
|
)
|
|
}
|