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

chore: better Prettier config for easier reviews

Browse Source
This commit is contained in:
Théo LUDWIG
2023-10-23 23:11:59 +02:00
parent c7ad15a465
commit e566ef6c38
105 changed files with 2138 additions and 2080 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,15 @@
export const Arrow = (): JSX.Element => {
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>
)

8
components/Header/Locales/LocaleFlag.tsx
View File

@ -1,7 +1,7 @@
import Image from 'next/image'
import Image from "next/image"
import type { CookiesStore } from '@/utils/constants'
import { useI18n } from '@/i18n/i18n.client'
import type { CookiesStore } from "@/utils/constants"
import { useI18n } from "@/i18n/i18n.client"
export interface LocaleFlagProps {
locale: string
@ -22,7 +22,7 @@ export const LocaleFlag = (props: LocaleFlagProps): JSX.Element => {
src={`/images/locales/${locale}.svg`}
alt={locale}
/>
<p data-cy='locale-flag-text' className='mx-2 text-base'>
<p data-cy="locale-flag-text" className="mx-2 text-base">
{i18n.translate(`common.${locale}`)}
</p>
</>

38
components/Header/Locales/index.tsx
View File

@ -1,14 +1,14 @@
'use client'
"use client"
import { usePathname } from 'next/navigation'
import { useCallback, useEffect, useState, useRef } from 'react'
import classNames from 'clsx'
import { usePathname } from "next/navigation"
import { useCallback, useEffect, useState, useRef } from "react"
import classNames from "clsx"
import type { Locale as LocaleType, CookiesStore } from '@/utils/constants'
import { LOCALES } from '@/utils/constants'
import type { Locale as LocaleType, CookiesStore } from "@/utils/constants"
import { LOCALES } from "@/utils/constants"
import { Arrow } from './Arrow'
import { LocaleFlag } from './LocaleFlag'
import { Arrow } from "./Arrow"
import { LocaleFlag } from "./LocaleFlag"
export interface LocalesProps {
currentLocale: string
@ -38,28 +38,28 @@ export const Locales = (props: LocalesProps): JSX.Element => {
}
}
window.document.addEventListener('click', handleClickEvent)
window.document.addEventListener("click", handleClickEvent)
return () => {
return window.removeEventListener('click', handleClickEvent)
return window.removeEventListener("click", handleClickEvent)
}
}, [])
const handleLocale = async (locale: LocaleType): Promise<void> => {
const { setLocale } = await import('@/i18n/i18n.server')
const { setLocale } = await import("@/i18n/i18n.server")
setLocale(locale)
}
if (pathname.startsWith('/blog')) {
if (pathname.startsWith("/blog")) {
return <></>
}
return (
<div className='flex cursor-pointer flex-col items-center justify-center'>
<div className="flex cursor-pointer flex-col items-center justify-center">
<div
ref={languageClickRef}
data-cy='locale-click'
className='mr-5 flex items-center'
data-cy="locale-click"
className="mr-5 flex items-center"
onClick={handleHiddenMenu}
>
<LocaleFlag
@ -70,10 +70,10 @@ export const Locales = (props: LocalesProps): JSX.Element => {
</div>
<ul
data-cy='locales-list'
data-cy="locales-list"
className={classNames(
'absolute top-14 z-10 mr-4 mt-3 flex w-32 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-14 z-10 mr-4 mt-3 flex w-32 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag",
{ hidden: hiddenMenu },
)}
>
{LOCALES.filter((locale) => {
@ -82,7 +82,7 @@ export const Locales = (props: LocalesProps): JSX.Element => {
return (
<li
key={locale}
className='flex h-12 w-full items-center justify-center hover:bg-[#4f545c] hover:bg-opacity-20'
className="flex h-12 w-full items-center justify-center hover:bg-[#4f545c] hover:bg-opacity-20"
onClick={async () => {
return await handleLocale(locale)
}}

62
components/Header/SwitchTheme.tsx
View File

@ -1,9 +1,9 @@
'use client'
"use client"
import classNames from 'clsx'
import classNames from "clsx"
import { useTheme } from '@/theme/theme.client'
import type { CookiesStore } from '@/utils/constants'
import { useTheme } from "@/theme/theme.client"
import type { CookiesStore } from "@/utils/constants"
export interface SwitchThemeProps {
cookiesStore: CookiesStore
@ -14,63 +14,63 @@ export const SwitchTheme = (props: SwitchThemeProps): JSX.Element => {
const theme = useTheme(cookiesStore)
const handleClick = async (): Promise<void> => {
const { setTheme } = await import('@/theme/theme.server')
const newTheme = theme === 'dark' ? 'light' : 'dark'
const { setTheme } = await import("@/theme/theme.server")
const newTheme = theme === "dark" ? "light" : "dark"
setTheme(newTheme)
}
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 hidden'
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 hidden"
defaultChecked
/>
</div>

34
components/Header/index.tsx
View File

@ -1,39 +1,39 @@
import { cookies } from 'next/headers'
import Link from 'next/link'
import Image from 'next/image'
import { cookies } from "next/headers"
import Link from "next/link"
import Image from "next/image"
import { getI18n } from '@/i18n/i18n.server'
import { getI18n } from "@/i18n/i18n.server"
import { Locales } from './Locales'
import { SwitchTheme } from './SwitchTheme'
import { Locales } from "./Locales"
import { SwitchTheme } from "./SwitchTheme"
export const Header = (): JSX.Element => {
const cookiesStore = cookies()
const i18n = getI18n()
return (
<header className='sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
<Link href='/'>
<div className='flex items-center justify-center'>
<header className="sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black">
<Link href="/">
<div className="flex items-center justify-center">
<Image
quality={100}
width={60}
height={60}
src='/images/icon_small.png'
alt='Théo LUDWIG'
src="/images/icon_small.png"
alt="Théo LUDWIG"
priority
/>
<strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
<strong className="ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block">
Théo LUDWIG
</strong>
</div>
</Link>
<div className='flex justify-between'>
<div className='flex flex-col items-center justify-center px-6'>
<div className="flex justify-between">
<div className="flex flex-col items-center justify-center px-6">
<Link
href='/blog'
data-cy='header-blog-link'
className='text-yellow hover:underline dark:text-yellow-dark'
href="/blog"
data-cy="header-blog-link"
className="text-yellow hover:underline dark:text-yellow-dark"
>
Blog
</Link>