feat: unify upcoming event cards across pages

src/shared/ui/EntryCard.module.css

@@ -0,0 +1,42 @@
+.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,
+.value {
+	min-width: 0;
+}
+
+.value {
+	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);
+	}
+
+	.value {
+		grid-column: 2;
+		text-align: left;
+	}
+}

src/shared/ui/EntryCard.tsx

@@ -0,0 +1,49 @@
+import { Avatar, Paper, Stack, Text } from "@mantine/core";
+import { type FC, useState } from "react";
+import classes from "./EntryCard.module.css";
+
+type EntryCardProps = {
+	title: string;
+	metadata: string;
+	initial: string;
+	imageSrc?: string | null;
+	value: string;
+	valueLabel: string;
+	tone: "positive" | "negative" | "neutral";
+};
+
+const EntryCard: FC<EntryCardProps> = (props) => {
+	const [imageFailed, setImageFailed] = useState(false);
+	return (
+		<Paper className={classes.row} withBorder>
+			<Avatar
+				alt=""
+				aria-hidden="true"
+				radius="md"
+				size={40}
+				src={imageFailed ? null : props.imageSrc}
+				onError={() => setImageFailed(true)}
+			>
+				{props.initial}
+			</Avatar>
+			<Stack className={classes.identity} gap={2}>
+				<Text fw={700} lineClamp={1}>
+					{props.title}
+				</Text>
+				<Text c="dimmed" size="sm">
+					{props.metadata}
+				</Text>
+			</Stack>
+			<Stack className={classes.value} gap={2}>
+				<Text className={classes[props.tone]} fw={700}>
+					{props.value}
+				</Text>
+				<Text className={classes[props.tone]} size="sm">
+					{props.valueLabel}
+				</Text>
+			</Stack>
+		</Paper>
+	);
+};
+
+export { EntryCard };

src/shared/ui/index.ts

@@ -1,3 +1,4 @@
 export { AppShell } from "./AppShell";
+export { EntryCard } from "./EntryCard";
 export { LoadingSkeleton } from "./LoadingSkeleton";
 export { StateView } from "./StateView";