feat: add bond pages and portfolio navigation

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

@@ -0,0 +1,73 @@
+import {
+	Alert,
+	Button,
+	Group,
+	Paper,
+	Skeleton,
+	Stack,
+	Text,
+	Title,
+} from "@mantine/core";
+import type { FC, PropsWithChildren, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { LoadingSkeleton } from "@/shared/ui";
+import type { SectionState } from "../model/section";
+import classes from "./InstrumentDetails.module.css";
+
+type InstrumentSectionProps = PropsWithChildren<{
+	title: string;
+	state: SectionState;
+	controls?: ReactNode;
+	large?: boolean;
+	embedded?: boolean;
+}>;
+const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
+	const { t } = useTranslation();
+	return (
+		<Paper
+			component="section"
+			className={props.embedded ? classes.embeddedSection : classes.section}
+			withBorder={!props.embedded}
+		>
+			<Group justify="space-between" mb="md">
+				<Title order={2} size="h3">
+					{props.title}
+				</Title>
+				{props.controls}
+			</Group>
+			{props.state.refreshing ? (
+				<Text role="status" size="xs" c="dimmed">
+					{t("accounts.refreshing")}
+				</Text>
+			) : null}
+			{props.state.error ? (
+				<Alert color="orange" mb="sm" role="alert">
+					<Group justify="space-between">
+						<Text size="sm">
+							{props.state.hasData
+								? t("accounts.refreshError")
+								: t("stock.sectionError")}
+						</Text>
+						<Button size="xs" variant="default" onClick={props.state.retry}>
+							{t("accounts.retry")}
+						</Button>
+					</Group>
+				</Alert>
+			) : null}
+			{props.state.loading ? (
+				<LoadingSkeleton
+					label={t("stock.loadingSection", { section: props.title })}
+				>
+					<Stack>
+						<Skeleton h={props.large ? 280 : 65} />
+						<Skeleton h={14} w="60%" />
+					</Stack>
+				</LoadingSkeleton>
+			) : (
+				props.children
+			)}
+		</Paper>
+	);
+};
+
+export { InstrumentSection };