refactor: use tabs instead of spaces

This commit is contained in:
Sonny
2024-10-07 01:33:59 +02:00
parent f425decf2c
commit eea9732100
197 changed files with 5206 additions and 5209 deletions

View File

@@ -2,42 +2,42 @@ 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',
width: '350px',
display: 'flex',
gap: '1em',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
'& svg': {
color: theme.colors.blue,
},
'& svg': {
color: theme.colors.blue,
},
'& div': {
fontSize: '1.25rem',
fontWeight: '500',
},
'& div': {
fontSize: '1.25rem',
fontWeight: '500',
},
'& p': {
height: '65px',
color: theme.colors.grey,
},
'& p': {
height: '65px',
color: theme.colors.grey,
},
}));
const AboutItem = ({
title,
text,
icon: Icon,
title,
text,
icon: Icon,
}: {
title: string;
text: string;
icon: IconType;
title: string;
text: string;
icon: IconType;
}) => (
<AboutItemStyle>
<Icon size={60} />
<div>{title}</div>
<p>{text}</p>
</AboutItemStyle>
<AboutItemStyle>
<Icon size={60} />
<div>{title}</div>
<p>{text}</p>
</AboutItemStyle>
);
export default AboutItem;

View File

@@ -2,12 +2,12 @@ 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',
margin: '4em 0 !important',
display: 'flex',
gap: '2em',
alignItems: 'center',
justifyContent: 'center',
flexWrap: 'wrap',
});
export default AboutList;

View File

@@ -5,50 +5,50 @@ 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',
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',
},
'& *': {
textAlign: 'center',
},
}));
const HeroTitle = styled.h1({
fontSize: '32px',
fontSize: '32px',
});
const HeroQuote = styled(Quotes)({
fontSize: '20px',
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',
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>
);
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>
);
}

View File

@@ -2,33 +2,33 @@ 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',
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',
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>
</>
);
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>
</>
);
}