From 5453b7f965ac647c24318349f3f1688a80fca84c Mon Sep 17 00:00:00 2001 From: Sonny Date: Thu, 31 Oct 2024 01:19:21 +0100 Subject: [PATCH] refactor(mantine): migrate privacy --- inertia/components/footer/footer.module.css | 23 +++++ inertia/components/footer/mantine_footer.tsx | 53 +++++++++++ .../mantine/mantine_content_layout.tsx | 31 +++++++ inertia/components/navbar/mantine_navbar.tsx | 90 +++++++++++++++++++ .../navbar/mobile_navbar.module.css | 31 +++++++ inertia/i18n/locales/en/common.json | 1 + inertia/i18n/locales/fr/common.json | 1 + inertia/pages/privacy.tsx | 4 +- 8 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 inertia/components/footer/footer.module.css create mode 100644 inertia/components/footer/mantine_footer.tsx create mode 100644 inertia/components/layouts/mantine/mantine_content_layout.tsx create mode 100644 inertia/components/navbar/mantine_navbar.tsx create mode 100644 inertia/components/navbar/mobile_navbar.module.css diff --git a/inertia/components/footer/footer.module.css b/inertia/components/footer/footer.module.css new file mode 100644 index 0000000..c831eff --- /dev/null +++ b/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); + } +} diff --git a/inertia/components/footer/mantine_footer.tsx b/inertia/components/footer/mantine_footer.tsx new file mode 100644 index 0000000..b73b7a9 --- /dev/null +++ b/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) => ( + + {link.label} + + )); + + return ( +
+
+ MyLinks's logo + + + {t('footer.made_by')}{' '} + + Sonny + + {' • '} + + {packageJson.version} + + + + + {items} + +
+
+ ); +} diff --git a/inertia/components/layouts/mantine/mantine_content_layout.tsx b/inertia/components/layouts/mantine/mantine_content_layout.tsx new file mode 100644 index 0000000..036ad5b --- /dev/null +++ b/inertia/components/layouts/mantine/mantine_content_layout.tsx @@ -0,0 +1,31 @@ +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'; + +function MantineContentLayout({ children }: PropsWithChildren) { + return ( +
+ + +
{children}
+ + +
+ ); +} + +const LayoutWrapper = ({ children }: PropsWithChildren) => ( + + {children} + +); + +export { LayoutWrapper as MantineContentLayout }; diff --git a/inertia/components/navbar/mantine_navbar.tsx b/inertia/components/navbar/mantine_navbar.tsx new file mode 100644 index 0000000..ba39251 --- /dev/null +++ b/inertia/components/navbar/mantine_navbar.tsx @@ -0,0 +1,90 @@ +import PATHS from '#constants/paths'; +import { Link } from '@inertiajs/react'; +import { route } from '@izzyjs/route/client'; +import { + Box, + Burger, + Button, + Divider, + Drawer, + Group, + Image, + ScrollArea, + rem, +} from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; +import { useTranslation } from 'react-i18next'; +import ExternalLink from '~/components/common/external_link'; +import classes from './mobile_navbar.module.css'; + +export default function MantineNavbar() { + const { t } = useTranslation('common'); + const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = + useDisclosure(false); + + return ( + +
+ + MyLinks's logo + + + + {t('home')} + + + Github + + + Extension + + + + + + + + + +
+ + + + + + + {t('home')} + + + Github + + + Extension + + + + + + + + + + + ); +} diff --git a/inertia/components/navbar/mobile_navbar.module.css b/inertia/components/navbar/mobile_navbar.module.css new file mode 100644 index 0000000..b3b4196 --- /dev/null +++ b/inertia/components/navbar/mobile_navbar.module.css @@ -0,0 +1,31 @@ +.header { + height: rem(60px); + padding-left: var(--mantine-spacing-md); + padding-right: var(--mantine-spacing-md); + border-bottom: rem(1px) solid + light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); +} + +.link { + display: flex; + align-items: center; + height: 100%; + padding-left: var(--mantine-spacing-md); + padding-right: var(--mantine-spacing-md); + text-decoration: none; + color: light-dark(var(--mantine-color-black), var(--mantine-color-white)); + font-weight: 500; + font-size: var(--mantine-font-size-sm); + + @media (max-width: $mantine-breakpoint-sm) { + height: rem(42px); + width: 100%; + } + + @mixin hover { + background-color: light-dark( + var(--mantine-color-gray-0), + var(--mantine-color-dark-6) + ); + } +} diff --git a/inertia/i18n/locales/en/common.json b/inertia/i18n/locales/en/common.json index 5893dfd..9f7d71a 100644 --- a/inertia/i18n/locales/en/common.json +++ b/inertia/i18n/locales/en/common.json @@ -2,6 +2,7 @@ "slogan": "Manage your links in the best possible way", "confirm": "Confirm", "cancel": "Cancel", + "home": "Home", "back-home": "← Back to home", "logout": "Logout", "login": "Login", diff --git a/inertia/i18n/locales/fr/common.json b/inertia/i18n/locales/fr/common.json index 3c16af8..3544e9d 100644 --- a/inertia/i18n/locales/fr/common.json +++ b/inertia/i18n/locales/fr/common.json @@ -2,6 +2,7 @@ "slogan": "Gérez vos liens de la meilleure des façons", "confirm": "Confirmer", "cancel": "Annuler", + "home": "Accueil", "back-home": "← Revenir à l'accueil", "logout": "Déconnexion", "login": "Connexion", diff --git a/inertia/pages/privacy.tsx b/inertia/pages/privacy.tsx index 485c0f7..1165cfa 100644 --- a/inertia/pages/privacy.tsx +++ b/inertia/pages/privacy.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; -import LegalContentLayout from '~/components/layouts/legal_content_layout'; +import { MantineContentLayout } from '~/components/layouts/mantine/mantine_content_layout'; function PrivacyPage() { const { t } = useTranslation('privacy'); @@ -45,6 +45,6 @@ function PrivacyPage() { } PrivacyPage.layout = (page: ReactNode) => ( - + ); export default PrivacyPage;