Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-09 15:05:35 +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>
);
}