feat: unify upcoming event cards across pages

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 };