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

refactor: add new small content layout

Browse Source
This commit is contained in:
Sonny
2025-08-21 15:44:29 +02:00
parent 44c187acaf
commit c2a1d06008
6 changed files with 74 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
inertia/components/common/footer/footer.tsx
View File

@@ -1,33 +1,38 @@
import { AUTHOR_GITHUB_URL, AUTHOR_NAME } from '#config/project';
import PATHS from '#core/constants/paths';
import { route } from '@izzyjs/route/client';
import { Anchor, Group, Text } from '@mantine/core';
import { withTranslation, WithTranslation } from 'react-i18next';
import ExternalLink from '~/components/common/external_link';
import { ExternalLinkStyled } from '~/components/common/links/external_link_styled';
import { InternalLink } from '~/components/common/links/internal_link';
import { LocaleSwitcher } from '~/components/common/locale_switcher';
import { ThemeSwitcher } from '~/components/common/theme_switcher';
import packageJson from '../../../../package.json';
import classes from './footer.module.css';
export const Footer = () => (
export const Footer = withTranslation()(({ t }: WithTranslation) => (
<Group className={classes.footer}>
<Group className={classes.footer__content}>
<Text>
Made with ❤️ by{' '}
{t('footer.made_by')}{' '}
<ExternalLinkStyled href={AUTHOR_GITHUB_URL}>
{AUTHOR_NAME}
</ExternalLinkStyled>
</Text>
•
<Text>
<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
{packageJson.version}
</Anchor>
</Text>
•
<Group gap="sm" mt={4} mb={4}>
<Group gap="sm">
<ThemeSwitcher />
<LocaleSwitcher />
</Group>
•
<Group gap="sm">
<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
{packageJson.version}
</Anchor>
<InternalLink href={route('privacy').path}>{t('privacy')}</InternalLink>
<InternalLink href={route('terms').path}>{t('terms')}</InternalLink>
</Group>
</Group>
);
</Group>
));

19
inertia/components/footer/footer.module.css
View File

@@ -1,19 +0,0 @@
.footer {
width: 100%;
}
.inner {
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: $mantine-breakpoint-xs) {
flex-direction: column;
}
}
.links {
@media (max-width: $mantine-breakpoint-xs) {
margin-top: var(--mantine-spacing-md);
}
}

59
inertia/components/footer/footer.tsx
View File

@@ -1,59 +0,0 @@
import PATHS from '#core/constants/paths';
import { Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import { Anchor, Group, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import ExternalLink from '~/components/common/external_link';
import { LocaleSwitcher } from '~/components/common/locale_switcher';
import { ThemeSwitcher } from '~/components/common/theme_switcher';
import packageJson from '../../../package.json';
import classes from './footer.module.css';
export function MantineFooter() {
const { t } = useTranslation('common');
const links = [
{ link: route('privacy').path, label: t('privacy'), external: false },
{ link: route('terms').path, label: t('terms'), external: false },
{ link: PATHS.EXTENSION, label: 'Extension', external: true },
];
const items = links.map((link) => (
<Anchor
c="dimmed"
// @ts-expect-error
component={link.external ? ExternalLink : Link}
key={link.label}
href={link.link}
size="sm"
>
{link.label}
</Anchor>
));
return (
<div className={classes.footer}>
<div className={classes.inner}>
<Group gap={4} c="dimmed">
<Text size="sm">{t('footer.made_by')}</Text>{' '}
<Anchor size="sm" component={ExternalLink} href={PATHS.AUTHOR}>
Sonny
</Anchor>
{' • '}
<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
{packageJson.version}
</Anchor>
</Group>
<Group gap="sm" mt={4} mb={4}>
<ThemeSwitcher />
<LocaleSwitcher />
</Group>
<Group gap="xs" justify="flex-end" wrap="nowrap">
{items}
</Group>
</div>
</div>
);
}

44
inertia/layouts/small_content.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { Box, rem } from '@mantine/core';
import { PropsWithChildren } from 'react';
import { FloatingNavbar } from '~/components/common/floating_navbar/floating_navbar';
import { Footer } from '~/components/common/footer/footer';
import { BaseLayout } from './_base_layout';
const SmallContentLayout = ({ children }: PropsWithChildren) => (
<BaseLayout>
<Layout>{children}</Layout>
</BaseLayout>
);
export default SmallContentLayout;
const LAYOUT_WIDTH = '800px';
const Layout = ({ children }: PropsWithChildren) => (
<>
{/* Top navbar */}
<FloatingNavbar width={LAYOUT_WIDTH} />
{/* Page content */}
<Box
style={{
paddingInline: 'var(--mantine-spacing-lg)',
flex: 1,
}}
>
<Box
style={{
height: '100%',
maxWidth: '100%',
width: LAYOUT_WIDTH,
marginInline: 'auto',
marginBlock: rem(30),
}}
>
{children}
</Box>
</Box>
{/* Footer */}
<Footer />
</>
);

8
inertia/pages/privacy.tsx
View File

@@ -1,6 +1,7 @@
import { useTranslation } from 'react-i18next';
import SmallContentLayout from '~/layouts/small_content';
export default function PrivacyPage() {
function PrivacyPage() {
const { t } = useTranslation('privacy');
return (
<>
@@ -41,3 +42,8 @@ export default function PrivacyPage() {
</>
);
}
PrivacyPage.layout = (page: React.ReactNode) => (
<SmallContentLayout>{page}</SmallContentLayout>
);
export default PrivacyPage;

10
inertia/pages/terms.tsx
View File

@@ -1,8 +1,9 @@
import { Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import { Trans, useTranslation } from 'react-i18next';
import SmallContentLayout from '~/layouts/small_content';
export default function TermsPage() {
function TermsPage() {
const { t } = useTranslation('terms');
return (
<>
@@ -28,7 +29,7 @@ export default function TermsPage() {
<p>
<Trans
i18nKey="personal_data.collect.description"
components={{ a: <Link href={route('privacy').url} /> }}
components={{ a: <Link href={route('privacy').path} /> }}
/>
</p>
@@ -50,3 +51,8 @@ export default function TermsPage() {
</>
);
}
TermsPage.layout = (page: React.ReactNode) => (
<SmallContentLayout>{page}</SmallContentLayout>
);
export default TermsPage;