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

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import '@mantine/core/styles.css';
 import '@mantine/spotlight/styles.css';
-import '../../../styles/index.css';
+import '../../styles/index.css';
 
 const theme = createTheme({});
 const TRANSITION_IN_CLASS = '__transition_fadeIn';

inertia/mantine/layouts/mantine_content_layout.tsx

@@ -1,8 +1,8 @@
 import { Container } from '@mantine/core';
 import { PropsWithChildren } from 'react';
 import { MantineFooter } from '~/components/footer/mantine_footer';
-import BaseLayout from '~/components/layouts/mantine/_mantine_base_layout';
 import MantineNavbar from '~/components/navbar/mantine_navbar';
+import BaseLayout from '~/mantine/layouts/_mantine_base_layout';
 
 const MantineContentLayout = ({ children }: PropsWithChildren) => (
 	<Container

inertia/pages/home.tsx

@@ -1,70 +1,10 @@
+import { Container, Text, Title } from '@mantine/core';
 import { ReactNode } from 'react';
-import { MantineContentLayout } from '~/components/layouts/mantine/mantine_content_layout';
-
-import {
-	Container,
-	SimpleGrid,
-	Text,
-	ThemeIcon,
-	Title,
-	rem,
-} from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { AiFillFolderOpen } from 'react-icons/ai';
+import { FeatureList } from '~/mantine/components/home/feature_list';
-import { FaUser } from 'react-icons/fa';
+import { MantineContentLayout } from '~/mantine/layouts/mantine_content_layout';
-import { IoIosLink, IoIosSearch, IoIosShareAlt } from 'react-icons/io';
-import { IoExtensionPuzzleOutline } from 'react-icons/io5';
 import classes from './home.module.css';
 
-const features = [
-	'collection',
-	'link',
-	'search',
-	'extension',
-	'share',
-	'contribute',
-] as const;
-type FeatureName = (typeof features)[number];
-
-interface FeatureProps {
-	name: FeatureName;
-}
-
-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;
-	}
-}
-
-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>
-	);
-}
-
 function HomePage() {
 	const { t } = useTranslation('about');
 	return (
@@ -77,16 +17,7 @@ function HomePage() {
 				</Text>
 			</Container>
 
-			<SimpleGrid
+			<FeatureList />
-				mt={60}
-				cols={{ base: 1, sm: 2, md: 3 }}
-				spacing={{ base: 'xl', md: 50 }}
-				verticalSpacing={{ base: 'xl', md: 50 }}
-			>
-				{features.map((feature, index) => (
-					<Feature name={feature} key={index} />
-				))}
-			</SimpleGrid>
 		</Container>
 	);
 }

inertia/pages/privacy.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MantineContentLayout } from '~/components/layouts/mantine/mantine_content_layout';
+import { MantineContentLayout } from '~/mantine/layouts/mantine_content_layout';
 
 function PrivacyPage() {
 	const { t } = useTranslation('privacy');

inertia/pages/terms.tsx

@@ -2,7 +2,7 @@ import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { ReactNode } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { MantineContentLayout } from '~/components/layouts/mantine/mantine_content_layout';
+import { MantineContentLayout } from '~/mantine/layouts/mantine_content_layout';
 
 function TermsPage() {
 	const { t } = useTranslation('terms');