99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import { NavLink, Outlet, useOutletContext, useParams } from 'react-router-dom';
|
|
import { Box } from '@mui/material';
|
|
import { Heading } from '@moex-vibe/design-system';
|
|
import { useBrokerPortfolio } from '@/entities/broker-account';
|
|
|
|
export type BrokerAccountContext = {
|
|
accountId: string;
|
|
portfolio: ReturnType<typeof useBrokerPortfolio>;
|
|
};
|
|
|
|
export function useBrokerAccountContext() {
|
|
return useOutletContext<BrokerAccountContext>();
|
|
}
|
|
|
|
const links = [
|
|
{ to: '', label: 'Обзор', end: true },
|
|
{ to: '/shares', label: 'Акции' },
|
|
{ to: '/bonds', label: 'Облигации' },
|
|
{ to: '/operations', label: 'Операции' },
|
|
];
|
|
|
|
export function BrokerAccountLayout() {
|
|
const { accountId = '' } = useParams();
|
|
const portfolio = useBrokerPortfolio(accountId);
|
|
const basePath = `/broker/${encodeURIComponent(accountId)}`;
|
|
const context: BrokerAccountContext = { accountId, portfolio };
|
|
|
|
return (
|
|
<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) => (
|
|
<Box
|
|
key={link.to}
|
|
component={NavLink}
|
|
to={`${basePath}${link.to}`}
|
|
end={link.end}
|
|
sx={{
|
|
px: 1.5,
|
|
py: 1.25,
|
|
borderRadius: 2,
|
|
color: 'text.secondary',
|
|
textDecoration: 'none',
|
|
whiteSpace: 'nowrap',
|
|
flexShrink: 0,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
'&[aria-current="page"]': {
|
|
color: 'primary.main',
|
|
bgcolor: 'primary.light',
|
|
fontWeight: 700,
|
|
},
|
|
'&:focus-visible': {
|
|
outline: '3px solid',
|
|
outlineColor: 'primary.main',
|
|
outlineOffset: 2,
|
|
},
|
|
}}
|
|
>
|
|
{link.label}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
<Box sx={{ minWidth: 0 }}>
|
|
<Outlet context={context} />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|