feat: unify upcoming event cards across pages

src/entities/broker-operation/ui/LedgerEntryRow.module.css

@@ -1,42 +0,0 @@
-.row {
-	display: grid;
-	grid-template-columns: auto minmax(0, 1fr) auto;
-	gap: var(--mantine-spacing-sm);
-	align-items: center;
-	padding: var(--mantine-spacing-md);
-	border-color: var(--mantine-color-gray-3);
-	background: var(--mantine-color-gray-0);
-}
-
-.identity,
-.amount {
-	min-width: 0;
-}
-
-.amount {
-	text-align: right;
-	white-space: nowrap;
-}
-
-.positive {
-	color: var(--mantine-color-green-6);
-}
-
-.negative {
-	color: var(--mantine-color-red-6);
-}
-
-.neutral {
-	color: var(--mantine-color-dimmed);
-}
-
-@media (max-width: 36em) {
-	.row {
-		grid-template-columns: auto minmax(0, 1fr);
-	}
-
-	.amount {
-		grid-column: 2;
-		text-align: left;
-	}
-}

src/entities/broker-operation/ui/LedgerEntryRow.tsx

@@ -1,11 +1,9 @@
-import { Avatar, Paper, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
+import { EntryCard } from "@/shared/ui";
 import type { BrokerageOperation } from "../api/useBrokerageOperations";
 import { paymentPresentation } from "../model/display";
-import classes from "./LedgerEntryRow.module.css";
 
 type LedgerEntryRowProps = {
 	operation: BrokerageOperation;
@@ -14,44 +12,23 @@ type LedgerEntryRowProps = {
 const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
 	const { operation } = props;
 	const { t } = useTranslation();
-	const [imageFailed, setImageFailed] = useState(false);
 	const instrument =
 		operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
-	const logoSrc = imageFailed ? null : instrumentLogoUrl(operation.logoName);
 	const payment = paymentPresentation(operation);
 	const metadata = [formatSnapshotTime(operation.occurredAt), instrument].join(
 		" · ",
 	);
 
 	return (
-		<Paper className={classes.row} withBorder>
-			<Avatar
-				alt=""
-				aria-hidden="true"
-				radius="md"
-				size={40}
-				src={logoSrc}
-				onError={() => setImageFailed(true)}
-			>
-				{(instrument.trim()[0] ?? "?").toUpperCase()}
-			</Avatar>
-			<Stack className={classes.identity} gap={2}>
-				<Text fw={700} lineClamp={1}>
-					{operation.description || operation.type}
-				</Text>
-				<Text c="dimmed" size="sm">
-					{metadata}
-				</Text>
-			</Stack>
-			<Stack className={classes.amount} gap={2}>
-				<Text className={classes[payment.tone]} fw={700}>
-					{payment.amount}
-				</Text>
-				<Text className={classes[payment.tone]} size="sm">
-					{t(payment.label)}
-				</Text>
-			</Stack>
-		</Paper>
+		<EntryCard
+			title={operation.description || operation.type}
+			metadata={metadata}
+			initial={(instrument.trim()[0] ?? "?").toUpperCase()}
+			imageSrc={instrumentLogoUrl(operation.logoName)}
+			value={payment.amount}
+			valueLabel={t(payment.label)}
+			tone={payment.tone}
+		/>
 	);
 };