feat: establish frontend foundation

src/pages/account/index.ts

@@ -0,0 +1,6 @@
+export {
+	AccountPage,
+	AccountPageEmpty,
+	AccountPageError,
+	AccountPageLoading,
+} from "./ui/AccountPage";

src/pages/account/ui/AccountPage.tsx

@@ -0,0 +1,42 @@
+import { Stack, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { StateView } from "../../../shared/ui/StateView";
+
+export function AccountPage() {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<Title order={1}>{t("account.title")}</Title>
+			<AccountPageEmpty />
+		</Stack>
+	);
+}
+
+export function AccountPageLoading() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+}
+
+export function AccountPageError() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+		/>
+	);
+}
+
+export function AccountPageEmpty() {
+	const { t } = useTranslation();
+	return (
+		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
+	);
+}

src/pages/accounts/index.ts

@@ -0,0 +1,6 @@
+export {
+	AccountsPage,
+	AccountsPageEmpty,
+	AccountsPageError,
+	AccountsPageLoading,
+} from "./ui/AccountsPage";

src/pages/accounts/ui/AccountsPage.tsx

@@ -0,0 +1,42 @@
+import { Stack, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { StateView } from "../../../shared/ui/StateView";
+
+export function AccountsPage() {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<Title order={1}>{t("accounts.title")}</Title>
+			<AccountsPageEmpty />
+		</Stack>
+	);
+}
+
+export function AccountsPageLoading() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+}
+
+export function AccountsPageError() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+		/>
+	);
+}
+
+export function AccountsPageEmpty() {
+	const { t } = useTranslation();
+	return (
+		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
+	);
+}

src/pages/login/index.ts

@@ -0,0 +1,6 @@
+export {
+	LoginPage,
+	LoginPageEmpty,
+	LoginPageError,
+	LoginPageLoading,
+} from "./ui/LoginPage";

src/pages/login/ui/LoginPage.tsx

@@ -0,0 +1,42 @@
+import { Stack, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { StateView } from "../../../shared/ui/StateView";
+
+export function LoginPage() {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<Title order={1}>{t("auth.login")}</Title>
+			<LoginPageEmpty />
+		</Stack>
+	);
+}
+
+export function LoginPageLoading() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+}
+
+export function LoginPageError() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+		/>
+	);
+}
+
+export function LoginPageEmpty() {
+	const { t } = useTranslation();
+	return (
+		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
+	);
+}

src/pages/not-found/index.ts

@@ -0,0 +1,6 @@
+export {
+	NotFoundPage,
+	NotFoundPageEmpty,
+	NotFoundPageError,
+	NotFoundPageLoading,
+} from "./ui/NotFoundPage";

src/pages/not-found/ui/NotFoundPage.tsx

@@ -0,0 +1,51 @@
+import { Stack, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { Button, StateView } from "../../../shared/ui/StateView";
+
+export function NotFoundPage() {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<Title order={1}>{t("notFound.title")}</Title>
+			<NotFoundPageEmpty />
+		</Stack>
+	);
+}
+
+export function NotFoundPageLoading() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+}
+
+export function NotFoundPageError() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+		/>
+	);
+}
+
+export function NotFoundPageEmpty() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			title={t("states.emptyTitle")}
+			text={t("states.emptyText")}
+			action={
+				<Button component={Link} to="/accounts">
+					{t("notFound.action")}
+				</Button>
+			}
+		/>
+	);
+}

src/pages/register/index.ts

@@ -0,0 +1,6 @@
+export {
+	RegisterPage,
+	RegisterPageEmpty,
+	RegisterPageError,
+	RegisterPageLoading,
+} from "./ui/RegisterPage";

src/pages/register/ui/RegisterPage.tsx

@@ -0,0 +1,42 @@
+import { Stack, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { StateView } from "../../../shared/ui/StateView";
+
+export function RegisterPage() {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<Title order={1}>{t("auth.register")}</Title>
+			<RegisterPageEmpty />
+		</Stack>
+	);
+}
+
+export function RegisterPageLoading() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+}
+
+export function RegisterPageError() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+		/>
+	);
+}
+
+export function RegisterPageEmpty() {
+	const { t } = useTranslation();
+	return (
+		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
+	);
+}

src/pages/settings/index.ts

@@ -0,0 +1,6 @@
+export {
+	SettingsPage,
+	SettingsPageEmpty,
+	SettingsPageError,
+	SettingsPageLoading,
+} from "./ui/SettingsPage";

src/pages/settings/ui/SettingsPage.tsx

@@ -0,0 +1,42 @@
+import { Stack, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { StateView } from "../../../shared/ui/StateView";
+
+export function SettingsPage() {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<Title order={1}>{t("settings.title")}</Title>
+			<SettingsPageEmpty />
+		</Stack>
+	);
+}
+
+export function SettingsPageLoading() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+}
+
+export function SettingsPageError() {
+	const { t } = useTranslation();
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+		/>
+	);
+}
+
+export function SettingsPageEmpty() {
+	const { t } = useTranslation();
+	return (
+		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
+	);
+}