88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { Link } from 'react-router-dom';
|
||
import type { Portfolio } from '@/shared/api/responses';
|
||
|
||
export function PortfolioCard({ portfolio }: { portfolio: Portfolio }) {
|
||
const chipStyle = (bg: string): React.CSSProperties => ({
|
||
background: bg,
|
||
padding: '4px 10px',
|
||
borderRadius: 6,
|
||
fontSize: 12,
|
||
color: '#fff',
|
||
fontWeight: 500,
|
||
});
|
||
|
||
return (
|
||
<Link
|
||
to={`/portfolios/${portfolio.id}`}
|
||
style={{
|
||
display: 'block',
|
||
padding: 20,
|
||
background: 'var(--color-surface)',
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: 'var(--border-radius)',
|
||
textDecoration: 'none',
|
||
color: 'inherit',
|
||
transition: 'box-shadow 0.2s',
|
||
}}
|
||
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)')}
|
||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'flex-start',
|
||
marginBottom: 12,
|
||
}}
|
||
>
|
||
<h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, flex: 1 }}>{portfolio.name}</h3>
|
||
<div style={{ textAlign: 'right' }}>
|
||
<div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.2 }}>
|
||
{portfolio.totalValue?.toLocaleString('ru-RU', {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2,
|
||
})}
|
||
</div>
|
||
<div style={{ fontSize: 11, color: 'var(--color-text-secondary)' }}>
|
||
{portfolio.currency}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{portfolio.description && (
|
||
<p style={{ margin: '0 0 12px', fontSize: 13, color: 'var(--color-text-secondary)' }}>
|
||
{portfolio.description}
|
||
</p>
|
||
)}
|
||
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||
{portfolio.shareCount > 0 && (
|
||
<span style={chipStyle('#1b5e20')}>
|
||
{portfolio.shareCount} {pluralize(portfolio.shareCount, 'акция', 'акции', 'акций')}
|
||
</span>
|
||
)}
|
||
{portfolio.bondCount > 0 && (
|
||
<span style={chipStyle('#0d47a1')}>
|
||
{portfolio.bondCount}{' '}
|
||
{pluralize(portfolio.bondCount, 'облигация', 'облигации', 'облигаций')}
|
||
</span>
|
||
)}
|
||
<span style={chipStyle('#424242')}>
|
||
{portfolio.positionCount}{' '}
|
||
{pluralize(portfolio.positionCount, 'позиция', 'позиции', 'позиций')}
|
||
</span>
|
||
</div>
|
||
|
||
<span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>
|
||
обновлён {new Date(portfolio.updatedAt).toLocaleDateString('ru-RU')}
|
||
</span>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
function pluralize(n: number, one: string, few: string, many: string): string {
|
||
if (n % 10 === 1 && n % 100 !== 11) return one;
|
||
if (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)) return few;
|
||
return many;
|
||
}
|