refactor(mantine): migrate privacy

inertia/components/footer/footer.module.css

@@ -0,0 +1,23 @@
+.footer {
+	margin-top: rem(40px);
+	border-top: rem(1px) solid
+		light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.inner {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: var(--mantine-spacing-md);
+	padding-bottom: var(--mantine-spacing-md);
+
+	@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/mantine_footer.tsx

@@ -0,0 +1,53 @@
+import PATHS from '#constants/paths';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Anchor, Group, Image } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import ExternalLink from '~/components/common/external_link';
+import packageJson from '../../../package.json';
+import classes from './footer.module.css';
+
+export function MantineFooter() {
+	const { t } = useTranslation('common');
+
+	const links = [
+		{ link: route('privacy').url, label: t('privacy') },
+		{ link: route('terms').url, label: t('terms') },
+		{ link: PATHS.EXTENSION, label: 'Extension' },
+	];
+
+	const items = links.map((link) => (
+		<Anchor
+			c="dimmed"
+			component={Link}
+			key={link.label}
+			href={link.link}
+			size="sm"
+		>
+			{link.label}
+		</Anchor>
+	));
+
+	return (
+		<div className={classes.footer}>
+			<div className={classes.inner}>
+				<Image src="/logo-light.png" h={40} alt="MyLinks's logo" />
+
+				<Group gap={4}>
+					{t('footer.made_by')}{' '}
+					<Anchor component={ExternalLink} href={PATHS.AUTHOR}>
+						Sonny
+					</Anchor>
+					{' • '}
+					<Anchor component={ExternalLink} href={PATHS.REPO_GITHUB}>
+						{packageJson.version}
+					</Anchor>
+				</Group>
+
+				<Group gap="xs" justify="flex-end" wrap="nowrap">
+					{items}
+				</Group>
+			</div>
+		</div>
+	);
+}