theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

feat: improve header to set locale + remove setup page

Browse Source
This commit is contained in:
divlo
2021-04-18 18:02:55 +02:00
parent a1608b25b6
commit e68fdb132e
34 changed files with 283 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/Footer/LanguageButton.tsx
View File

@ -1,29 +0,0 @@
import setLanguage from 'next-translate/setLanguage'
interface LanguageButtonProps {
lang: string
}
export const LanguageButton: React.FC<LanguageButtonProps> = (props) => {
return (
<>
<span
onClick={async () => await setLanguage(props.lang)}
className='important'
>
{props.children}
</span>
<style jsx>
{`
span {
cursor: pointer;
}
span:hover {
text-decoration: underline;
}
`}
</style>
</>
)
}

39
components/Footer/LanguageFlag.tsx
View File

@ -1,39 +0,0 @@
import Image from 'next/image'
import { Tooltip } from 'components/design/Tooltip'
import { LanguageButton } from './LanguageButton'
interface LanguageFlagProps {
imageLink: string
title: string
lang: string
}
export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
const { lang, title, imageLink } = props
return (
<>
<div className='LanguageFlag'>
<LanguageButton lang={lang}>
<Tooltip title={title}>
<Image alt={title} src={imageLink} width={31} height={31} />
</Tooltip>
</LanguageButton>
</div>
<style jsx>
{`
.LanguageFlag {
margin-right: 7px;
}
@media (max-width: 700px) {
.LanguageFlag {
display: none;
}
}
`}
</style>
</>
)
}

36
components/Footer/index.tsx
View File

@ -1,36 +1,16 @@
import useTranslation from 'next-translate/useTranslation'
import { LanguageButton } from './LanguageButton'
import { LanguageFlag } from './LanguageFlag'
export const Footer: React.FC = () => {
const { t } = useTranslation()
return (
<>
<footer className='Footer text-center'>
<p className='Footer__text'>
<p>
<span className='important'>Divlo</span> | {t('common:allRightsReserved')}
</p>
<p className='Footer__lang'>
<LanguageButton lang='en'>{t('common:english')}</LanguageButton> |{' '}
<LanguageButton lang='fr'>{t('common:french')}</LanguageButton>
</p>
</footer>
<div className='Footer__flags'>
<LanguageFlag
lang='en'
imageLink='/images/flags/english_flag.png'
title={t('common:english')}
/>
<LanguageFlag
lang='fr'
imageLink='/images/flags/french_flag.png'
title={t('common:french')}
/>
</div>
<style jsx>
{`
.Footer {
@ -39,19 +19,7 @@ export const Footer: React.FC = () => {
flex-direction: column;
justify-content: center;
align-items: center;
}
.Footer__text {
margin: 20px 0 10px 0;
}
.Footer__lang {
margin: 0 0 20px 0;
}
.Footer__flags {
display: flex;
position: fixed;
bottom: 28px;
left: 32px;
z-index: 10;
padding: 10px;
}
`}
</style>