75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Paper, SimpleGrid, Text, VisuallyHidden } from "@mantine/core";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { Portfolio } from "@/entities/portfolio";
|
|
|
|
import { formatDecimal } from "@/shared/lib";
|
|
|
|
import classes from "../../AccountPage.module.css";
|
|
|
|
const SIGN_PREFIX_LENGTH = 2;
|
|
|
|
type CurrencyCardsProps = {
|
|
amounts: Portfolio["totalsByCurrency"];
|
|
};
|
|
|
|
const CurrencyCards: FC<CurrencyCardsProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
const { amounts } = props;
|
|
|
|
const currencies: Record<string, { name: string; symbol: string }> = {
|
|
EUR: { name: t("portfolio.currencies.EUR"), symbol: "€" },
|
|
RUB: { name: t("portfolio.currencies.RUB"), symbol: "₽" },
|
|
USD: { name: t("portfolio.currencies.USD"), symbol: "$" },
|
|
};
|
|
|
|
return (
|
|
<SimpleGrid cols={{ base: 1, md: 3, sm: 2 }} spacing={10}>
|
|
{amounts.map((money) => {
|
|
const amount = formatDecimal(money.value);
|
|
|
|
return (
|
|
<Paper
|
|
className={classes.total}
|
|
component="dl"
|
|
key={money.currency}
|
|
m={0}
|
|
withBorder
|
|
>
|
|
<Text className={classes.totalBadge} component="dt">
|
|
<span aria-hidden="true">
|
|
{currencies[money.currency]?.symbol ?? money.currency}
|
|
</span>
|
|
|
|
<VisuallyHidden>
|
|
{currencies[money.currency]?.name ?? money.currency}
|
|
</VisuallyHidden>
|
|
</Text>
|
|
|
|
<Text className={classes.totalAmount} component="dd" m={0}>
|
|
{amount.startsWith("-")
|
|
? (
|
|
<>
|
|
<span className={classes.totalLeadingDigits}>
|
|
{amount.slice(0, SIGN_PREFIX_LENGTH)}
|
|
</span>
|
|
|
|
{amount.slice(SIGN_PREFIX_LENGTH)}
|
|
</>
|
|
)
|
|
: (
|
|
amount
|
|
)}{" "}
|
|
{currencies[money.currency]?.symbol ?? money.currency}
|
|
</Text>
|
|
</Paper>
|
|
);
|
|
})}
|
|
</SimpleGrid>
|
|
);
|
|
};
|
|
|
|
export { CurrencyCards };
|