theoludwig/react-component-form
Archived
1
1
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:26:27 +02:00
parent 1224ece116
commit a49e844c70
50 changed files with 4642 additions and 3862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
example/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>
)

4
example/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/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>
</>

32
example/components/Header/Language/index.tsx
View File

@ -1,11 +1,11 @@
import { useCallback, useEffect, useState, useRef } from 'react'
import useTranslation from 'next-translate/useTranslation'
import setLanguage from 'next-translate/setLanguage'
import classNames from 'clsx'
import { useCallback, useEffect, 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 i18n from "../../../i18n.json"
import { Arrow } from "./Arrow"
import { LanguageFlag } from "./LanguageFlag"
export const Language: React.FC = () => {
const { lang: currentLanguage } = useTranslation()
@ -28,10 +28,10 @@ export const Language: React.FC = () => {
}
}
window.document.addEventListener('click', handleClickEvent)
window.document.addEventListener("click", handleClickEvent)
return () => {
return window.removeEventListener('click', handleClickEvent)
return window.removeEventListener("click", handleClickEvent)
}
}, [])
@ -40,11 +40,11 @@ export const Language: React.FC = () => {
}
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='language-click'
className='mr-5 flex items-center'
data-cy="language-click"
className="mr-5 flex items-center"
onClick={handleHiddenMenu}
>
<LanguageFlag language={currentLanguage} />
@ -52,10 +52,10 @@ export const Language: React.FC = () => {
</div>
<ul
data-cy='languages-list'
data-cy="languages-list"
className={classNames(
'absolute top-14 z-10 mt-3 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-14 z-10 mt-3 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) => {
@ -65,7 +65,7 @@ export const Language: React.FC = () => {
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 () => {
await handleLanguage(language)
}}