Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-10 15:35:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sonny
2024-11-01 16:10:23 +01:00
committed by Sonny
parent 1da9f0baf4
commit 1a102ebc5f
7 changed files with 80 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
inertia/components/layouts/mantine/_mantine_base_layout.tsx
View File

@@ -1,45 +0,0 @@
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>
</>
);
}

33
inertia/components/layouts/mantine/mantine_content_layout.tsx
View File

@@ -1,33 +0,0 @@
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';
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 };