ksv741
bcf93691aa
Add variant="bond" to PositionCard with bond-specific CSS classes (.bondCard, .bondMain, etc.) matching the stock expanded layout. PositionSection now passes variant based on section kind. Bond cards render 3-column grid (logo | identity | value) with meta row, identical to stock cards.
38 lines
953 B
TypeScript
38 lines
953 B
TypeScript
import { SimpleGrid } from "@mantine/core";
|
|
import type { FC } from "react";
|
|
import type { AccountPagePositionSection } from "../AccountPage.vm";
|
|
import { PositionCard } from "./PositionCard.view";
|
|
import { Section } from "./Section.view";
|
|
|
|
type PositionSectionProps = {
|
|
title: string;
|
|
section: AccountPagePositionSection;
|
|
};
|
|
|
|
const PositionSection: FC<PositionSectionProps> = (props) => {
|
|
const { title, section } = props;
|
|
|
|
return (
|
|
<Section title={title}>
|
|
<SimpleGrid cols={section.wide ? 1 : { base: 1, sm: 2, md: 3 }}>
|
|
{section.positions.map((position) => (
|
|
<PositionCard
|
|
key={`${position.figi}-${position.displayName}-${position.quantity}`}
|
|
position={position}
|
|
wide={section.wide}
|
|
variant={
|
|
section.kind === "stocks"
|
|
? "stock"
|
|
: section.kind === "bonds"
|
|
? "bond"
|
|
: undefined
|
|
}
|
|
/>
|
|
))}
|
|
</SimpleGrid>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export { PositionSection };
|