refactor: simplify auth and instrument pages

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

@@ -0,0 +1,45 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
+import { Avatar, Button, Group, Paper, Text, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import classes from "./InstrumentHeader.module.css";
+
+type InstrumentHeaderProps = PropsWithChildren<{
+	logoSrc: null | string;
+	name: string;
+	onRefresh: () => void;
+	refreshing: boolean;
+	subtitle: ReactNode;
+}>;
+
+const InstrumentHeader: FC<InstrumentHeaderProps> = (props) => {
+	const { children, logoSrc, name, onRefresh, refreshing, subtitle } = props;
+	const { t } = useTranslation();
+
+	return (
+		<Paper className={classes.header} component="header" withBorder>
+			<Group align="start" justify="space-between">
+				<div className={classes.identity}>
+					<Avatar alt="" key={logoSrc} radius="md" size={56} src={logoSrc}>
+						{name[0]}
+					</Avatar>
+
+					<div>
+						<Title order={1} size="h2">{name}</Title>
+
+						<Text c="dimmed" size="sm">{subtitle}</Text>
+					</div>
+				</div>
+
+				<Button disabled={refreshing} onClick={onRefresh} variant="subtle">
+					{t("investment.refresh")}
+				</Button>
+			</Group>
+
+			{children}
+		</Paper>
+	);
+};
+
+export { InstrumentHeader };