Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

chore: better Prettier config for easier reviews

Browse Source
This commit is contained in:
Théo LUDWIG
2023-10-23 23:33:39 +02:00
parent a8781724d4
commit 71ea41695f
209 changed files with 4093 additions and 4114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/Header/Header.tsx
View File

@ -1,29 +1,29 @@
import Link from 'next/link'
import Image from 'next/image'
import Link from "next/link"
import Image from "next/image"
import { Language } from './Language'
import { SwitchTheme } from './SwitchTheme'
import { Language } from "./Language"
import { SwitchTheme } from "./SwitchTheme"
export const Header: React.FC = () => {
return (
<header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
<div className='container flex justify-between'>
<Link href='/'>
<div className='flex items-center justify-center'>
<header className="sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black">
<div className="container flex justify-between">
<Link href="/">
<div className="flex items-center justify-center">
<Image
priority
quality={100}
width={60}
height={60}
src='/images/Thream.png'
alt='Thream'
src="/images/Thream.png"
alt="Thream"
/>
<span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
<span className="ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block">
Thream
</span>
</div>
</Link>
<div className='flex justify-between'>
<div className="flex justify-between">
<Language />
<SwitchTheme />
</div>

14
components/Header/Language/Arrow.tsx
View File

@ -1,15 +1,15 @@
export const Arrow: React.FC = () => {
return (
<svg
width='12'
height='8'
viewBox='0 0 12 8'
fill='none'
xmlns='http://www.w3.org/2000/svg'
width="12"
height="8"
viewBox="0 0 12 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
className='fill-current text-black dark:text-white'
d='M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z'
className="fill-current text-black dark:text-white"
d="M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z"
/>
</svg>
)

30
components/Header/Language/Language.tsx
View File

@ -1,12 +1,12 @@
import { useCallback, useState, useRef } from 'react'
import useTranslation from 'next-translate/useTranslation'
import setLanguage from 'next-translate/setLanguage'
import classNames from 'clsx'
import { useCallback, useState, useRef } from "react"
import useTranslation from "next-translate/useTranslation"
import setLanguage from "next-translate/setLanguage"
import classNames from "clsx"
import i18n from '../../../i18n.json'
import { Arrow } from './Arrow'
import { LanguageFlag } from './LanguageFlag'
import { useClickOutsideAlerter } from '../../../hooks/useClickOutsideAlerter'
import i18n from "../../../i18n.json"
import { Arrow } from "./Arrow"
import { LanguageFlag } from "./LanguageFlag"
import { useClickOutsideAlerter } from "../../../hooks/useClickOutsideAlerter"
export interface LanguageProps {
className?: string
@ -35,12 +35,12 @@ export const Language: React.FC<LanguageProps> = (props) => {
return (
<div
className='relative flex cursor-pointer flex-col items-center justify-center'
className="relative flex cursor-pointer flex-col items-center justify-center"
ref={languageClickRef}
>
<div
data-cy='language-click'
className='mr-5 flex items-center'
data-cy="language-click"
className="mr-5 flex items-center"
onClick={handleHiddenMenu}
>
<LanguageFlag language={currentLanguage} />
@ -48,11 +48,11 @@ export const Language: React.FC<LanguageProps> = (props) => {
</div>
<ul
data-cy='languages-list'
data-cy="languages-list"
className={classNames(
className,
'absolute top-16 z-10 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
{ hidden: hiddenMenu }
"absolute top-16 z-10 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag",
{ hidden: hiddenMenu },
)}
>
{i18n.locales.map((language, index) => {
@ -62,7 +62,7 @@ export const Language: React.FC<LanguageProps> = (props) => {
return (
<li
key={index}
className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
className="flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20"
onClick={async () => {
return await handleLanguage(language)
}}

4
components/Header/Language/LanguageFlag.tsx
View File

@ -1,4 +1,4 @@
import Image from 'next/image'
import Image from "next/image"
export interface LanguageFlagProps {
language: string
@ -16,7 +16,7 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
src={`/images/svg/languages/${language}.svg`}
alt={language}
/>
<p data-cy='language-flag-text' className='mx-2 text-base'>
<p data-cy="language-flag-text" className="mx-2 text-base">
{language.toUpperCase()}
</p>
</>

2
components/Header/Language/index.ts
View File

@ -1 +1 @@
export * from './Language'
export * from "./Language"

58
components/Header/SwitchTheme.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import classNames from 'clsx'
import { useTheme } from 'next-themes'
import { useEffect, useState } from "react"
import classNames from "clsx"
import { useTheme } from "next-themes"
export const SwitchTheme: React.FC = () => {
const [mounted, setMounted] = useState(false)
@ -15,61 +15,61 @@ export const SwitchTheme: React.FC = () => {
}
const handleClick = (): void => {
setTheme(theme === 'dark' ? 'light' : 'dark')
setTheme(theme === "dark" ? "light" : "dark")
}
return (
<div
className='flex items-center'
data-cy='switch-theme-click'
className="flex items-center"
data-cy="switch-theme-click"
onClick={handleClick}
>
<div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
<div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
<div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
<div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
<div
data-cy='switch-theme-dark'
data-cy="switch-theme-dark"
className={classNames(
'absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
"absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out",
{
'opacity-100': theme === 'dark',
'opacity-0': theme === 'light'
}
"opacity-100": theme === "dark",
"opacity-0": theme === "light",
},
)}
>
<span className='relative flex h-[10px] w-[10px] items-center justify-center'>
<span className="relative flex h-[10px] w-[10px] items-center justify-center">
🌜
</span>
</div>
<div
data-cy='switch-theme-light'
data-cy="switch-theme-light"
className={classNames(
'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
"absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]",
{
'opacity-100': theme === 'light',
'opacity-0': theme === 'dark'
}
"opacity-100": theme === "light",
"opacity-0": theme === "dark",
},
)}
>
<span className='relative flex h-[10px] w-[10px] items-center justify-center'>
<span className="relative flex h-[10px] w-[10px] items-center justify-center">
🌞
</span>
</div>
</div>
<div
className={classNames(
'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
"absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out",
{
'left-[27px]': theme === 'dark',
'left-0': theme === 'light'
}
"left-[27px]": theme === "dark",
"left-0": theme === "light",
},
)}
style={{ border: '1px solid #4d4d4d' }}
style={{ border: "1px solid #4d4d4d" }}
/>
<input
data-cy='switch-theme-input'
type='checkbox'
aria-label='Dark mode toggle'
className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
data-cy="switch-theme-input"
type="checkbox"
aria-label="Dark mode toggle"
className="absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0"
defaultChecked
/>
</div>

2
components/Header/index.ts
View File

@ -1 +1 @@
export * from './Header'
export * from "./Header"