From 2e0138194c536550f36af969fc93f71f345126b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= <contact@theoludwig.fr>
Date: Tue, 1 Aug 2023 17:22:09 +0200
Subject: [PATCH] refactor: avoid usage of React.FC to use JSX.Element (to stay
 consistent)

---
 components/ErrorPage.tsx                                    | 2 +-
 components/Header/Locales/Arrow.tsx                         | 2 +-
 components/Header/Locales/LocaleFlag.tsx                    | 2 +-
 components/Interests/InterestParagraph.tsx                  | 4 +++-
 components/Interests/InterestsList/InterestItem.tsx         | 2 +-
 components/Interests/InterestsList/index.tsx                | 2 +-
 components/Interests/index.tsx                              | 2 +-
 components/Loader/Loader.tsx                                | 2 +-
 components/OpenSource/Repository.tsx                        | 2 +-
 components/OpenSource/index.tsx                             | 2 +-
 components/Portfolio/PortfolioItem.tsx                      | 2 +-
 components/Portfolio/index.tsx                              | 2 +-
 components/Profile/ProfileDescriptionBottom.tsx             | 2 +-
 components/Profile/ProfileInfo.tsx                          | 2 +-
 components/Profile/ProfileList/ProfileItem.tsx              | 2 +-
 components/Profile/ProfileLogo.tsx                          | 2 +-
 .../Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx  | 4 +++-
 .../Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx | 4 +++-
 .../Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx | 4 +++-
 .../Profile/SocialMediaList/SocialMediaIcons/Icon.tsx       | 2 +-
 .../Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx    | 2 +-
 .../Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx | 4 +++-
 .../SocialMediaList/SocialMediaIcons/TwitterIcon.tsx        | 4 +++-
 .../SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx        | 4 +++-
 components/Profile/SocialMediaList/SocialMediaItem.tsx      | 6 ++----
 components/Profile/SocialMediaList/index.tsx                | 2 +-
 components/Profile/index.tsx                                | 2 +-
 components/Skills/Skill.tsx                                 | 2 +-
 components/Skills/SkillsSection.tsx                         | 2 +-
 components/Skills/index.tsx                                 | 2 +-
 components/design/RevealFade.tsx                            | 4 +++-
 components/design/Section/SectionHeading.tsx                | 2 +-
 components/design/Section/index.tsx                         | 2 +-
 components/design/ShadowContainer.tsx                       | 2 +-
 34 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/components/ErrorPage.tsx b/components/ErrorPage.tsx
index c2f127d..ca5c2d8 100644
--- a/components/ErrorPage.tsx
+++ b/components/ErrorPage.tsx
@@ -7,7 +7,7 @@ export interface ErrorPageProps {
   message: string
 }
 
-export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
+export const ErrorPage = (props: ErrorPageProps): JSX.Element => {
   const { message, statusCode } = props
   const i18n = getI18n()
 
diff --git a/components/Header/Locales/Arrow.tsx b/components/Header/Locales/Arrow.tsx
index c0d20a7..6a3ccb8 100644
--- a/components/Header/Locales/Arrow.tsx
+++ b/components/Header/Locales/Arrow.tsx
@@ -1,4 +1,4 @@
-export const Arrow: React.FC = () => {
+export const Arrow = (): JSX.Element => {
   return (
     <svg
       width='12'
diff --git a/components/Header/Locales/LocaleFlag.tsx b/components/Header/Locales/LocaleFlag.tsx
index d434795..64a5503 100644
--- a/components/Header/Locales/LocaleFlag.tsx
+++ b/components/Header/Locales/LocaleFlag.tsx
@@ -8,7 +8,7 @@ export interface LocaleFlagProps {
   cookiesStore: CookiesStore
 }
 
-export const LocaleFlag: React.FC<LocaleFlagProps> = (props) => {
+export const LocaleFlag = (props: LocaleFlagProps): JSX.Element => {
   const { locale, cookiesStore } = props
 
   const i18n = useI18n(cookiesStore)
diff --git a/components/Interests/InterestParagraph.tsx b/components/Interests/InterestParagraph.tsx
index 61fb67c..5730887 100644
--- a/components/Interests/InterestParagraph.tsx
+++ b/components/Interests/InterestParagraph.tsx
@@ -5,7 +5,9 @@ export interface InterestParagraphProps {
   description: string
 }
 
-export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {
+export const InterestParagraph = (
+  props: InterestParagraphProps
+): JSX.Element => {
   const { title, description } = props
 
   return (
diff --git a/components/Interests/InterestsList/InterestItem.tsx b/components/Interests/InterestsList/InterestItem.tsx
index 7c01abb..0954360 100644
--- a/components/Interests/InterestsList/InterestItem.tsx
+++ b/components/Interests/InterestsList/InterestItem.tsx
@@ -6,7 +6,7 @@ interface InterestItemProps {
   fontAwesomeIcon: IconDefinition
 }
 
-export const InterestItem: React.FC<InterestItemProps> = (props) => {
+export const InterestItem = (props: InterestItemProps): JSX.Element => {
   const { fontAwesomeIcon, title } = props
 
   return (
diff --git a/components/Interests/InterestsList/index.tsx b/components/Interests/InterestsList/index.tsx
index 1d0ed3c..8feac3b 100644
--- a/components/Interests/InterestsList/index.tsx
+++ b/components/Interests/InterestsList/index.tsx
@@ -3,7 +3,7 @@ import { faGit } from '@fortawesome/free-brands-svg-icons'
 
 import { InterestItem } from './InterestItem'
 
-export const InterestsList: React.FC = () => {
+export const InterestsList = (): JSX.Element => {
   return (
     <div className='my-4 flex justify-center'>
       <ul className='m-0 flex w-96 list-none justify-around p-0'>
diff --git a/components/Interests/index.tsx b/components/Interests/index.tsx
index 5d01e2d..5273279 100644
--- a/components/Interests/index.tsx
+++ b/components/Interests/index.tsx
@@ -4,7 +4,7 @@ import type { InterestParagraphProps } from './InterestParagraph'
 import { InterestParagraph } from './InterestParagraph'
 import { InterestsList } from './InterestsList'
 
-export const Interests: React.FC = () => {
+export const Interests = (): JSX.Element => {
   const i18n = getI18n()
 
   let paragraphs = i18n.translate<InterestParagraphProps[]>(
diff --git a/components/Loader/Loader.tsx b/components/Loader/Loader.tsx
index 5959fe2..89fd87f 100644
--- a/components/Loader/Loader.tsx
+++ b/components/Loader/Loader.tsx
@@ -6,7 +6,7 @@ export interface LoaderProps {
   className?: string
 }
 
-export const Loader: React.FC<LoaderProps> = (props) => {
+export const Loader = (props: LoaderProps): JSX.Element => {
   const { width = 50, height = 50, className } = props
 
   return (
diff --git a/components/OpenSource/Repository.tsx b/components/OpenSource/Repository.tsx
index 7c62e2d..2871247 100644
--- a/components/OpenSource/Repository.tsx
+++ b/components/OpenSource/Repository.tsx
@@ -7,7 +7,7 @@ export interface RepositoryProps {
   href: string
 }
 
-export const Repository: React.FC<RepositoryProps> = (props) => {
+export const Repository = (props: RepositoryProps): JSX.Element => {
   const { name, description, href } = props
 
   return (
diff --git a/components/OpenSource/index.tsx b/components/OpenSource/index.tsx
index 0f18427..79bec09 100644
--- a/components/OpenSource/index.tsx
+++ b/components/OpenSource/index.tsx
@@ -2,7 +2,7 @@ import { getI18n } from '@/i18n/i18n.server'
 
 import { Repository } from './Repository'
 
-export const OpenSource: React.FC = () => {
+export const OpenSource = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
diff --git a/components/Portfolio/PortfolioItem.tsx b/components/Portfolio/PortfolioItem.tsx
index 1e29306..f2d0c30 100644
--- a/components/Portfolio/PortfolioItem.tsx
+++ b/components/Portfolio/PortfolioItem.tsx
@@ -9,7 +9,7 @@ export interface PortfolioItemProps {
   image: string
 }
 
-export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
+export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
   const { title, description, link, image } = props
 
   return (
diff --git a/components/Portfolio/index.tsx b/components/Portfolio/index.tsx
index edb1de8..d7e6401 100644
--- a/components/Portfolio/index.tsx
+++ b/components/Portfolio/index.tsx
@@ -3,7 +3,7 @@ import { getI18n } from '@/i18n/i18n.server'
 import type { PortfolioItemProps } from './PortfolioItem'
 import { PortfolioItem } from './PortfolioItem'
 
-export const Portfolio: React.FC = () => {
+export const Portfolio = (): JSX.Element => {
   const i18n = getI18n()
 
   let items = i18n.translate<PortfolioItemProps[]>('home.portfolio.items')
diff --git a/components/Profile/ProfileDescriptionBottom.tsx b/components/Profile/ProfileDescriptionBottom.tsx
index 407b729..fff1a31 100644
--- a/components/Profile/ProfileDescriptionBottom.tsx
+++ b/components/Profile/ProfileDescriptionBottom.tsx
@@ -1,6 +1,6 @@
 import { getI18n } from '@/i18n/i18n.server'
 
-export const ProfileDescriptionBottom: React.FC = () => {
+export const ProfileDescriptionBottom = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
diff --git a/components/Profile/ProfileInfo.tsx b/components/Profile/ProfileInfo.tsx
index 9fb5219..06e5471 100644
--- a/components/Profile/ProfileInfo.tsx
+++ b/components/Profile/ProfileInfo.tsx
@@ -1,6 +1,6 @@
 import { getI18n } from '@/i18n/i18n.server'
 
-export const ProfileInformation: React.FC = () => {
+export const ProfileInformation = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
diff --git a/components/Profile/ProfileList/ProfileItem.tsx b/components/Profile/ProfileList/ProfileItem.tsx
index 2f7699e..69d5903 100644
--- a/components/Profile/ProfileList/ProfileItem.tsx
+++ b/components/Profile/ProfileList/ProfileItem.tsx
@@ -4,7 +4,7 @@ interface ProfileItemProps {
   link?: string
 }
 
-export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
+export const ProfileItem = (props: ProfileItemProps): JSX.Element => {
   const { title, value, link } = props
 
   return (
diff --git a/components/Profile/ProfileLogo.tsx b/components/Profile/ProfileLogo.tsx
index 4ee0b99..afeeb1f 100644
--- a/components/Profile/ProfileLogo.tsx
+++ b/components/Profile/ProfileLogo.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image'
 
 import Logo from 'public/images/logo.png'
 
-export const ProfileLogo: React.FC = () => {
+export const ProfileLogo = (): JSX.Element => {
   return (
     <div className='max-h-[370px] max-w-[370px] px-2 py-6'>
       <Image quality={100} src={Logo} alt='Théo LUDWIG' priority />
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx
index 7b79d41..804f1c8 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx
@@ -1,6 +1,8 @@
 import { Icon } from './Icon'
 
-export const EmailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const EmailIcon = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
   return (
     <Icon {...props}>
       <title>Email</title>
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx
index 5c1c99a..0c9d728 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx
@@ -1,6 +1,8 @@
 import { Icon } from './Icon'
 
-export const GitHubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const GitHubIcon = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
   return (
     <Icon {...props}>
       <title>GitHub</title>
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx
index e3fee10..1eb1544 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx
@@ -1,6 +1,8 @@
 import { Icon } from './Icon'
 
-export const GitLabIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const GitLabIcon = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
   return (
     <Icon {...props}>
       <title>GitLab</title>
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
index fd7a663..0e2b09b 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx'
 
-export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const Icon = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
   const { children, className, ...rest } = props
 
   return (
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx
index 7d2c35d..7455aa5 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx
@@ -1,6 +1,6 @@
 import { Icon } from './Icon'
 
-export const NPMIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const NPMIcon = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
   return (
     <Icon {...props}>
       <title>npm</title>
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx
index ef7b680..ad75c3c 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx
@@ -1,6 +1,8 @@
 import { Icon } from './Icon'
 
-export const TwitchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const TwitchIcon = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
   return (
     <Icon {...props}>
       <title>Twitch</title>
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx
index f82e08e..0b8d707 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx
@@ -1,6 +1,8 @@
 import { Icon } from './Icon'
 
-export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const TwitterIcon = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
   return (
     <Icon {...props}>
       <title>Twitter</title>
diff --git a/components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx b/components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx
index af5a987..5dadba0 100644
--- a/components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx
@@ -1,6 +1,8 @@
 import { Icon } from './Icon'
 
-export const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const YouTubeIcon = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
   return (
     <Icon {...props}>
       <title>YouTube</title>
diff --git a/components/Profile/SocialMediaList/SocialMediaItem.tsx b/components/Profile/SocialMediaList/SocialMediaItem.tsx
index ab2507c..ea030f6 100644
--- a/components/Profile/SocialMediaList/SocialMediaItem.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaItem.tsx
@@ -1,11 +1,9 @@
-interface SocialMediaItemProps {
+interface SocialMediaItemProps extends React.PropsWithChildren {
   link: string
   ariaLabel: string
 }
 
-export const SocialMediaItem: React.FC<
-  React.PropsWithChildren<SocialMediaItemProps>
-> = (props) => {
+export const SocialMediaItem = (props: SocialMediaItemProps): JSX.Element => {
   const { link, ariaLabel, children } = props
 
   return (
diff --git a/components/Profile/SocialMediaList/index.tsx b/components/Profile/SocialMediaList/index.tsx
index 852d03a..1fb5d56 100644
--- a/components/Profile/SocialMediaList/index.tsx
+++ b/components/Profile/SocialMediaList/index.tsx
@@ -7,7 +7,7 @@ import { TwitchIcon } from './SocialMediaIcons/TwitchIcon'
 import { EmailIcon } from './SocialMediaIcons/EmailIcon'
 import { NPMIcon } from './SocialMediaIcons/NPMIcon'
 
-export const SocialMediaList: React.FC = () => {
+export const SocialMediaList = (): JSX.Element => {
   return (
     <ul className='social-media-list m-0 mt-2 list-none py-4 text-center'>
       <SocialMediaItem link='https://github.com/theoludwig' ariaLabel='GitHub'>
diff --git a/components/Profile/index.tsx b/components/Profile/index.tsx
index 66a5afa..cd4c14f 100644
--- a/components/Profile/index.tsx
+++ b/components/Profile/index.tsx
@@ -5,7 +5,7 @@ import { ProfileInformation } from './ProfileInfo'
 import { ProfileList } from './ProfileList'
 import { ProfileLogo } from './ProfileLogo'
 
-export const Profile: React.FC = () => {
+export const Profile = (): JSX.Element => {
   const cookiesStore = cookies()
 
   return (
diff --git a/components/Skills/Skill.tsx b/components/Skills/Skill.tsx
index 409f2fa..bec6123 100644
--- a/components/Skills/Skill.tsx
+++ b/components/Skills/Skill.tsx
@@ -9,7 +9,7 @@ export interface SkillComponentProps {
   skill: SkillName
 }
 
-export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
+export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
   const { skill } = props
 
   const skillProperties = skills[skill]
diff --git a/components/Skills/SkillsSection.tsx b/components/Skills/SkillsSection.tsx
index 0d97c8e..f184f13 100644
--- a/components/Skills/SkillsSection.tsx
+++ b/components/Skills/SkillsSection.tsx
@@ -5,7 +5,7 @@ export interface SkillsSectionProps {
   children: React.ReactNode
 }
 
-export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
+export const SkillsSection = (props: SkillsSectionProps): JSX.Element => {
   const { title, children } = props
 
   return (
diff --git a/components/Skills/index.tsx b/components/Skills/index.tsx
index bd886da..6f823cf 100644
--- a/components/Skills/index.tsx
+++ b/components/Skills/index.tsx
@@ -3,7 +3,7 @@ import { getI18n } from '@/i18n/i18n.server'
 import { SkillComponent } from './Skill'
 import { SkillsSection } from './SkillsSection'
 
-export const Skills: React.FC = () => {
+export const Skills = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
diff --git a/components/design/RevealFade.tsx b/components/design/RevealFade.tsx
index 2edc144..7a9b2a7 100644
--- a/components/design/RevealFade.tsx
+++ b/components/design/RevealFade.tsx
@@ -2,7 +2,9 @@
 
 import { useEffect, useRef } from 'react'
 
-export const RevealFade: React.FC<React.PropsWithChildren> = (props) => {
+export type RevealFadeProps = React.PropsWithChildren
+
+export const RevealFade = (props: RevealFadeProps): JSX.Element => {
   const { children } = props
 
   const htmlElement = useRef<HTMLDivElement>(null)
diff --git a/components/design/Section/SectionHeading.tsx b/components/design/Section/SectionHeading.tsx
index dd0b5e8..c7cd49c 100644
--- a/components/design/Section/SectionHeading.tsx
+++ b/components/design/Section/SectionHeading.tsx
@@ -1,6 +1,6 @@
 type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
 
-export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
+export const SectionHeading = (props: SectionHeadingProps): JSX.Element => {
   const { children, ...rest } = props
 
   return (
diff --git a/components/design/Section/index.tsx b/components/design/Section/index.tsx
index 5b9b144..87cc29b 100644
--- a/components/design/Section/index.tsx
+++ b/components/design/Section/index.tsx
@@ -8,7 +8,7 @@ type SectionProps = React.ComponentPropsWithRef<'section'> & {
   withoutShadowContainer?: boolean
 }
 
-export const Section: React.FC<SectionProps> = (props) => {
+export const Section = (props: SectionProps): JSX.Element => {
   const {
     children,
     heading,
diff --git a/components/design/ShadowContainer.tsx b/components/design/ShadowContainer.tsx
index 6f2f2ff..95a6b24 100644
--- a/components/design/ShadowContainer.tsx
+++ b/components/design/ShadowContainer.tsx
@@ -2,7 +2,7 @@ import classNames from 'clsx'
 
 type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
 
-export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
+export const ShadowContainer = (props: ShadowContainerProps): JSX.Element => {
   const { children, className, ...rest } = props
 
   return (