refactor: tighten types and reuse instrument UI

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