refactor: move new mantine components in dedicated folder + split home

inertia/mantine/components/home/feature.tsx

@@ -0,0 +1,48 @@
+import { Text, ThemeIcon, rem } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { AiFillFolderOpen } from 'react-icons/ai';
+import { FaUser } from 'react-icons/fa';
+import { IoIosLink, IoIosSearch, IoIosShareAlt } from 'react-icons/io';
+import { IoExtensionPuzzleOutline } from 'react-icons/io5';
+import { featureList } from '~/mantine/components/home/feature_list';
+
+type FeatureName = (typeof featureList)[number];
+
+function getIcon(name: FeatureName) {
+	switch (name) {
+		case 'collection':
+			return AiFillFolderOpen;
+		case 'link':
+			return IoIosLink;
+		case 'search':
+			return IoIosSearch;
+		case 'extension':
+			return IoExtensionPuzzleOutline;
+		case 'share':
+			return IoIosShareAlt;
+		case 'contribute':
+			return FaUser;
+	}
+}
+
+interface FeatureProps {
+	name: FeatureName;
+}
+
+export function Feature({ name: featureName }: FeatureProps) {
+	const { t } = useTranslation('about');
+	const Icon = getIcon(featureName);
+	return (
+		<div>
+			<ThemeIcon variant="light" size={40} radius={40}>
+				<Icon style={{ width: rem(18), height: rem(18) }} />
+			</ThemeIcon>
+			<Text mt="sm" mb={7}>
+				{t(`${featureName}.title`)}
+			</Text>
+			<Text size="sm" c="dimmed" lh={1.6}>
+				{t(`${featureName}.text`)}
+			</Text>
+		</div>
+	);
+}

inertia/mantine/components/home/feature_list.tsx

@@ -0,0 +1,24 @@
+import { SimpleGrid } from '@mantine/core';
+import { Feature } from '~/mantine/components/home/feature';
+
+export const featureList = [
+	'collection',
+	'link',
+	'search',
+	'extension',
+	'share',
+	'contribute',
+] as const;
+
+export const FeatureList = () => (
+	<SimpleGrid
+		mt={60}
+		cols={{ base: 1, sm: 2, md: 3 }}
+		spacing={{ base: 'xl', md: 50 }}
+		verticalSpacing={{ base: 'xl', md: 50 }}
+	>
+		{featureList.map((feature, index) => (
+			<Feature name={feature} key={index} />
+		))}
+	</SimpleGrid>
+);

inertia/mantine/layouts/_mantine_base_layout.tsx

@@ -0,0 +1,45 @@
+import { router } from '@inertiajs/react';
+import { ColorSchemeScript, createTheme, MantineProvider } from '@mantine/core';
+import dayjs from 'dayjs';
+import { ReactNode, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import '@mantine/core/styles.css';
+import '@mantine/spotlight/styles.css';
+import '../../styles/index.css';
+
+const theme = createTheme({});
+const TRANSITION_IN_CLASS = '__transition_fadeIn';
+const TRANSITION_OUT_CLASS = '__transition_fadeOut';
+
+export default function BaseLayout({ children }: { children: ReactNode }) {
+	const { i18n } = useTranslation();
+	dayjs.locale(i18n.language);
+
+	const findAppElement = () => document.getElementById('app');
+
+	const flipClass = (addClass: string, removeClass: string) => {
+		const appElement = findAppElement();
+		if (appElement) {
+			appElement.classList.add(addClass);
+			appElement.classList.remove(removeClass);
+		}
+	};
+
+	useEffect(() => {
+		flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS);
+		router.on('start', () =>
+			flipClass(TRANSITION_OUT_CLASS, TRANSITION_IN_CLASS)
+		);
+		router.on('finish', () =>
+			flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS)
+		);
+	}, []);
+
+	return (
+		<>
+			<ColorSchemeScript />
+			<MantineProvider theme={theme}>{children}</MantineProvider>
+		</>
+	);
+}

inertia/mantine/layouts/mantine_content_layout.tsx

@@ -0,0 +1,33 @@
+import { Container } from '@mantine/core';
+import { PropsWithChildren } from 'react';
+import { MantineFooter } from '~/components/footer/mantine_footer';
+import MantineNavbar from '~/components/navbar/mantine_navbar';
+import BaseLayout from '~/mantine/layouts/_mantine_base_layout';
+
+const MantineContentLayout = ({ children }: PropsWithChildren) => (
+	<Container
+		style={{
+			minHeight: '100%',
+			display: 'flex',
+			flexDirection: 'column',
+		}}
+	>
+		<MantineNavbar />
+		<main
+			style={{
+				flex: 1,
+			}}
+		>
+			{children}
+		</main>
+		<MantineFooter />
+	</Container>
+);
+
+const LayoutWrapper = ({ children }: PropsWithChildren) => (
+	<BaseLayout>
+		<MantineContentLayout>{children}</MantineContentLayout>
+	</BaseLayout>
+);
+
+export { LayoutWrapper as MantineContentLayout };