52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
|
|
import type { FC } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
import type { BrokerageAccount } from "../api/useBrokerageAccounts";
|
|
import { accountTypeKey } from "../model/display";
|
|
import classes from "./BrokerageAccountList.module.css";
|
|
|
|
type BrokerageAccountListProps = { accounts: BrokerageAccount[] };
|
|
|
|
const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
|
|
const { accounts } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
|
{accounts.map((account) => (
|
|
<Card
|
|
component={Link}
|
|
to={`/accounts/${account.id}`}
|
|
key={account.id}
|
|
className={classes.card}
|
|
padding="lg"
|
|
radius="lg"
|
|
withBorder
|
|
>
|
|
<Stack gap="xs">
|
|
<Text className={classes.kicker} size="xs" fw={700}>
|
|
{t(accountTypeKey(account.type))}
|
|
</Text>
|
|
<Text fw={800} size="lg">
|
|
{account.name}
|
|
</Text>
|
|
{account.openedOn ? (
|
|
<Text c="dimmed" size="sm">
|
|
{t("accounts.openedOn", {
|
|
date: new Intl.DateTimeFormat("ru-RU", {
|
|
dateStyle: "long",
|
|
timeZone: "UTC",
|
|
}).format(new Date(`${account.openedOn}T00:00:00Z`)),
|
|
})}
|
|
</Text>
|
|
) : null}
|
|
</Stack>
|
|
</Card>
|
|
))}
|
|
</SimpleGrid>
|
|
);
|
|
};
|
|
|
|
export { BrokerageAccountList };
|