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

refactor(mantine): migrate home page

Browse Source
This commit is contained in:
Sonny
2024-10-31 02:25:59 +01:00
committed by Sonny
parent 8d474f74eb
commit 5c4ee3a1cd
13 changed files with 160 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
inertia/components/common/mantine_theme_switcher.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { useMantineColorScheme, ActionIcon } from '@mantine/core';
import { TbSun, TbMoonStars } from 'react-icons/tb';
export function MantineThemeSwitcher() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
return (
<ActionIcon
variant="default"
aria-label="Toggle color scheme"
onClick={() => toggleColorScheme()}
size="lg"
>
{colorScheme === 'dark' ? <TbSun /> : <TbMoonStars />}
</ActionIcon>
);
}

43
inertia/components/home/about/about_item.tsx
View File

@@ -1,43 +0,0 @@
import styled from '@emotion/styled';
import { IconType } from 'react-icons/lib';
const AboutItemStyle = styled.li(({ theme }) => ({
width: '350px',
display: 'flex',
gap: '1em',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
'& svg': {
color: theme.colors.blue,
},
'& div': {
fontSize: '1.25rem',
fontWeight: '500',
},
'& p': {
height: '65px',
color: theme.colors.grey,
},
}));
const AboutItem = ({
title,
text,
icon: Icon,
}: {
title: string;
text: string;
icon: IconType;
}) => (
<AboutItemStyle>
<Icon size={60} />
<div>{title}</div>
<p>{text}</p>
</AboutItemStyle>
);
export default AboutItem;

13
inertia/components/home/about/about_list.tsx
View File

@@ -1,13 +0,0 @@
import styled from '@emotion/styled';
import UnstyledList from '~/components/common/unstyled/unstyled_list';
const AboutList = styled(UnstyledList)({
margin: '4em 0 !important',
display: 'flex',
gap: '2em',
alignItems: 'center',
justifyContent: 'center',
flexWrap: 'wrap',
});
export default AboutList;

54
inertia/components/home/hero_header.tsx
View File

@@ -1,54 +0,0 @@
import styled from '@emotion/styled';
import { Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import { useTranslation } from 'react-i18next';
import Quotes from '~/components/quotes';
const HeroStyle = styled.header(({ theme }) => ({
height: '250px',
minHeight: '250px',
width: '100%',
backgroundColor: theme.colors.secondary,
marginTop: '0.5em',
borderRadius: theme.border.radius,
padding: '1em',
display: 'flex',
gap: '1em',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
'& *': {
textAlign: 'center',
},
}));
const HeroTitle = styled.h1({
fontSize: '32px',
});
const HeroQuote = styled(Quotes)({
fontSize: '20px',
});
const LinkButton = styled(Link)(({ theme }) => ({
fontSize: '1rem',
width: 'fit-content',
color: theme.colors.white,
backgroundColor: theme.colors.primary,
borderRadius: '5rem',
padding: '0.5em 1.5em',
}));
export default function HeroHeader() {
const { t } = useTranslation();
return (
<HeroStyle>
<HeroTitle>{t('about:hero.title')}</HeroTitle>
<HeroQuote>{t('common:slogan')}</HeroQuote>
<LinkButton href={route('dashboard').url}>
{t('about:hero.cta')}
</LinkButton>
</HeroStyle>
);
}

34
inertia/components/home/website_preview.tsx
View File

@@ -1,34 +0,0 @@
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
const ScreenshotWrapper = styled.div({
position: 'relative',
height: '360px',
width: '640px',
maxWidth: '100%',
margin: '0 auto',
});
const Screenshot = styled.img(({ theme }) => ({
height: 'auto !important',
width: '100%',
boxShadow: theme.colors.boxShadow,
borderRadius: theme.border.radius,
overflow: 'hidden',
}));
export default function WebsitePreview() {
const { t } = useTranslation('about');
return (
<>
<h2>{t('look-title')}</h2>
<ScreenshotWrapper>
<Screenshot
src="/website-screenshot.png"
alt={t('website-screenshot-alt')}
title={t('website-screenshot-alt')}
/>
</ScreenshotWrapper>
</>
);
}

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

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

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

@@ -6,19 +6,23 @@ import MantineNavbar from '~/components/navbar/mantine_navbar';
function MantineContentLayout({ children }: PropsWithChildren) {
return (
<div
<Container
style={{
minHeight: '100%',
width: '100%',
backgroundColor: 'rgb(34, 40, 49)',
display: 'flex',
flexDirection: 'column',
}}
>
<Container>
<MantineNavbar />
<main>{children}</main>
<MantineFooter />
</Container>
</div>
<MantineNavbar />
<main
style={{
flex: 1,
}}
>
{children}
</main>
<MantineFooter />
</Container>
);
}

23
inertia/components/navbar/mantine_navbar.tsx
View File

@@ -15,6 +15,7 @@ import {
import { useDisclosure } from '@mantine/hooks';
import { useTranslation } from 'react-i18next';
import ExternalLink from '~/components/common/external_link';
import { MantineThemeSwitcher } from '~/components/common/mantine_theme_switcher';
import classes from './mobile_navbar.module.css';
export default function MantineNavbar() {
@@ -29,7 +30,7 @@ export default function MantineNavbar() {
<Image src="/logo-light.png" h={40} alt="MyLinks's logo" />
<Group h="100%" gap={0} visibleFrom="sm">
<Link href="#" className={classes.link}>
<Link href="/" className={classes.link}>
{t('home')}
</Link>
<ExternalLink href={PATHS.REPO_GITHUB} className={classes.link}>
@@ -40,17 +41,21 @@ export default function MantineNavbar() {
</ExternalLink>
</Group>
<Group visibleFrom="sm">
<Button component={Link} href={route('auth.login').url}>
<Group>
<MantineThemeSwitcher />
<Button
component={Link}
href={route('auth.login').url}
visibleFrom="sm"
>
{t('login')}
</Button>
<Burger
opened={drawerOpened}
onClick={toggleDrawer}
hiddenFrom="sm"
/>
</Group>
<Burger
opened={drawerOpened}
onClick={toggleDrawer}
hiddenFrom="sm"
/>
</Group>
</header>