refactor: add new small content layout

inertia/components/common/footer/footer.tsx

@@ -1,33 +1,38 @@
 import { AUTHOR_GITHUB_URL, AUTHOR_NAME } from '#config/project';
 import PATHS from '#core/constants/paths';
+import { route } from '@izzyjs/route/client';
 import { Anchor, Group, Text } from '@mantine/core';
+import { withTranslation, WithTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
 import { ExternalLinkStyled } from '~/components/common/links/external_link_styled';
+import { InternalLink } from '~/components/common/links/internal_link';
 import { LocaleSwitcher } from '~/components/common/locale_switcher';
 import { ThemeSwitcher } from '~/components/common/theme_switcher';
 import packageJson from '../../../../package.json';
 import classes from './footer.module.css';
 
-export const Footer = () => (
+export const Footer = withTranslation()(({ t }: WithTranslation) => (
 	<Group className={classes.footer}>
 		<Group className={classes.footer__content}>
 			<Text>
-				Made with ❤️ by{' '}
+				{t('footer.made_by')}{' '}
 				<ExternalLinkStyled href={AUTHOR_GITHUB_URL}>
 					{AUTHOR_NAME}
 				</ExternalLinkStyled>
 			</Text>
 			•
-			<Text>
+			<Group gap="sm">
-				<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
-					{packageJson.version}
-				</Anchor>
-			</Text>
-			•
-			<Group gap="sm" mt={4} mb={4}>
 				<ThemeSwitcher />
 				<LocaleSwitcher />
 			</Group>
+			•
+			<Group gap="sm">
+				<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
+					{packageJson.version}
+				</Anchor>
+				<InternalLink href={route('privacy').path}>{t('privacy')}</InternalLink>
+				<InternalLink href={route('terms').path}>{t('terms')}</InternalLink>
 			</Group>
 		</Group>
-);
+	</Group>
+));

inertia/components/footer/footer.module.css

@@ -1,19 +0,0 @@
-.footer {
-	width: 100%;
-}
-
-.inner {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	@media (max-width: $mantine-breakpoint-xs) {
-		flex-direction: column;
-	}
-}
-
-.links {
-	@media (max-width: $mantine-breakpoint-xs) {
-		margin-top: var(--mantine-spacing-md);
-	}
-}

inertia/components/footer/footer.tsx

@@ -1,59 +0,0 @@
-import PATHS from '#core/constants/paths';
-import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { Anchor, Group, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import ExternalLink from '~/components/common/external_link';
-import { LocaleSwitcher } from '~/components/common/locale_switcher';
-import { ThemeSwitcher } from '~/components/common/theme_switcher';
-import packageJson from '../../../package.json';
-import classes from './footer.module.css';
-
-export function MantineFooter() {
-	const { t } = useTranslation('common');
-
-	const links = [
-		{ link: route('privacy').path, label: t('privacy'), external: false },
-		{ link: route('terms').path, label: t('terms'), external: false },
-		{ link: PATHS.EXTENSION, label: 'Extension', external: true },
-	];
-
-	const items = links.map((link) => (
-		<Anchor
-			c="dimmed"
-			// @ts-expect-error
-			component={link.external ? ExternalLink : Link}
-			key={link.label}
-			href={link.link}
-			size="sm"
-		>
-			{link.label}
-		</Anchor>
-	));
-
-	return (
-		<div className={classes.footer}>
-			<div className={classes.inner}>
-				<Group gap={4} c="dimmed">
-					<Text size="sm">{t('footer.made_by')}</Text>{' '}
-					<Anchor size="sm" component={ExternalLink} href={PATHS.AUTHOR}>
-						Sonny
-					</Anchor>
-					{' • '}
-					<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
-						{packageJson.version}
-					</Anchor>
-				</Group>
-
-				<Group gap="sm" mt={4} mb={4}>
-					<ThemeSwitcher />
-					<LocaleSwitcher />
-				</Group>
-
-				<Group gap="xs" justify="flex-end" wrap="nowrap">
-					{items}
-				</Group>
-			</div>
-		</div>
-	);
-}

inertia/layouts/small_content.tsx

@@ -0,0 +1,44 @@
+import { Box, rem } from '@mantine/core';
+import { PropsWithChildren } from 'react';
+import { FloatingNavbar } from '~/components/common/floating_navbar/floating_navbar';
+import { Footer } from '~/components/common/footer/footer';
+import { BaseLayout } from './_base_layout';
+
+const SmallContentLayout = ({ children }: PropsWithChildren) => (
+	<BaseLayout>
+		<Layout>{children}</Layout>
+	</BaseLayout>
+);
+
+export default SmallContentLayout;
+
+const LAYOUT_WIDTH = '800px';
+const Layout = ({ children }: PropsWithChildren) => (
+	<>
+		{/* Top navbar */}
+		<FloatingNavbar width={LAYOUT_WIDTH} />
+
+		{/* Page content */}
+		<Box
+			style={{
+				paddingInline: 'var(--mantine-spacing-lg)',
+				flex: 1,
+			}}
+		>
+			<Box
+				style={{
+					height: '100%',
+					maxWidth: '100%',
+					width: LAYOUT_WIDTH,
+					marginInline: 'auto',
+					marginBlock: rem(30),
+				}}
+			>
+				{children}
+			</Box>
+		</Box>
+
+		{/* Footer */}
+		<Footer />
+	</>
+);

inertia/pages/privacy.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
+import SmallContentLayout from '~/layouts/small_content';
 
-export default function PrivacyPage() {
+function PrivacyPage() {
 	const { t } = useTranslation('privacy');
 	return (
 		<>
@@ -41,3 +42,8 @@ export default function PrivacyPage() {
 		</>
 	);
 }
+
+PrivacyPage.layout = (page: React.ReactNode) => (
+	<SmallContentLayout>{page}</SmallContentLayout>
+);
+export default PrivacyPage;

inertia/pages/terms.tsx

@@ -1,8 +1,9 @@
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { Trans, useTranslation } from 'react-i18next';
+import SmallContentLayout from '~/layouts/small_content';
 
-export default function TermsPage() {
+function TermsPage() {
 	const { t } = useTranslation('terms');
 	return (
 		<>
@@ -28,7 +29,7 @@ export default function TermsPage() {
 			<p>
 				<Trans
 					i18nKey="personal_data.collect.description"
-					components={{ a: <Link href={route('privacy').url} /> }}
+					components={{ a: <Link href={route('privacy').path} /> }}
 				/>
 			</p>
 
@@ -50,3 +51,8 @@ export default function TermsPage() {
 		</>
 	);
 }
+
+TermsPage.layout = (page: React.ReactNode) => (
+	<SmallContentLayout>{page}</SmallContentLayout>
+);
+export default TermsPage;