feat: add brocker account list

src/entities/brokerage-account/ui/BrokerageAccountList.module.css

@@ -0,0 +1,22 @@
+.card {
+	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
+	border-color: #bfdbfe;
+	box-shadow: 0 10px 28px rgb(15 23 42 / 6%);
+	color: inherit;
+	text-decoration: none;
+	transition:
+		transform 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.card:hover,
+.card:focus-visible {
+	box-shadow: 0 16px 36px rgb(15 23 42 / 10%);
+	transform: translateY(-2px);
+}
+
+.kicker {
+	color: #2563eb;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}

src/entities/brokerage-account/ui/BrokerageAccountList.test.tsx

@@ -0,0 +1,33 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+import { BrokerageAccountList } from "./BrokerageAccountList";
+
+describe("BrokerageAccountList", () => {
+	it("renders account details and an account link", () => {
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<BrokerageAccountList
+						accounts={[
+							{
+								id: "account-1",
+								name: "Основной",
+								type: "BROKERAGE",
+								openedOn: "2024-08-13",
+							},
+						]}
+					/>
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute(
+			"href",
+			"/accounts/account-1",
+		);
+		expect(screen.getByText("Брокерский счет")).toBeInTheDocument();
+		expect(screen.getByText(/Открыт/)).toBeInTheDocument();
+	});
+});

src/entities/brokerage-account/ui/BrokerageAccountList.tsx

@@ -0,0 +1,46 @@
+import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
+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[] };
+
+export function BrokerageAccountList({ accounts }: BrokerageAccountListProps) {
+	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>
+	);
+}