refactor: avoid usage of React.FC to use JSX.Element (to stay consistent)

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()
 

components/Header/Locales/Arrow.tsx

@@ -1,4 +1,4 @@
-export const Arrow: React.FC = () => {
+export const Arrow = (): JSX.Element => {
   return (
     <svg
       width='12'

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)

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 (

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 (

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'>

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[]>(

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 (

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 (

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 (

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 (

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')

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 (

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 (

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 (

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

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>

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>

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>

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 (

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>

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>

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>

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>

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 (

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'>

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 (

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]

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 (

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 (

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)

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 (

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,

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 (