refactor: tighten types and reuse instrument UI

src/features/instrument-details/ui/InstrumentDetails.module.css

@@ -60,3 +60,32 @@
 		grid-column: 1 / -1;
 	}
 }
+
+.page {
+	max-width: 1120px;
+	margin: 0 auto;
+	min-width: 0;
+}
+.price {
+	font-size: clamp(2rem, 4vw, 3.2rem);
+	font-weight: 700;
+	letter-spacing: -0.04em;
+	font-variant-numeric: tabular-nums;
+	line-height: 1.2;
+	overflow-wrap: anywhere;
+}
+.metricsGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
+	gap: var(--mantine-spacing-lg);
+}
+.metricsGrid > div {
+	padding: var(--mantine-spacing-sm);
+	background: var(--wl-color-subtle);
+	border-radius: var(--mantine-radius-md);
+}
+@media (max-width: 48em) {
+	.metricsGrid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}

src/features/instrument-details/ui/InstrumentMetric.view.tsx

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+
+import { Text } from "@mantine/core";
+
+type InstrumentMetricProps = { label: string; value: string };
+
+const InstrumentMetric: FC<InstrumentMetricProps> = props => (
+	<div>
+		<Text c="dimmed" size="xs">
+			{props.label}
+		</Text>
+
+		<Text fw={600} size="lg">
+			{props.value}
+		</Text>
+	</div>
+);
+
+export { InstrumentMetric };

src/features/instrument-details/ui/InstrumentQuoteStatus.view.tsx

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+
+import { Badge, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { formatSnapshotTime } from "@/shared/lib";
+
+type InstrumentQuoteStatusProps = {
+	quote?: { priceAt: null | string; tradingStatus: null | string };
+};
+
+const InstrumentQuoteStatus: FC<InstrumentQuoteStatusProps> = (props) => {
+	const { quote } = props;
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<Badge color="gray" variant="light">
+				{t(`stock.trading.${quote?.tradingStatus}`, {
+					defaultValue: t("stock.trading.unknown"),
+				})}
+			</Badge>
+
+			{!!quote?.priceAt && (
+				<Text c="dimmed" size="xs">
+					{t("stock.priceAt", { date: formatSnapshotTime(quote.priceAt) })}
+				</Text>
+			)}
+		</>
+	);
+};
+
+export { InstrumentQuoteStatus };