refactor: component props

src/components/AccountNotifications.tsx

@@ -3,20 +3,22 @@ import {
   ChevronLeftIcon,
   ChevronUpIcon,
 } from '@primer/octicons-react';
-import { useState } from 'react';
+import { type FC, useState } from 'react';
 import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
 import { RepositoryNotifications } from './Repository';
 import { PlatformIcon } from './icons/PlatformIcon';
 
-interface IProps {
+interface IAccountNotifications {
   account: Account;
   notifications: Notification[];
   showAccountHostname: boolean;
 }
 
-export const AccountNotifications = (props: IProps) => {
+export const AccountNotifications: FC<IAccountNotifications> = (
+  props: IAccountNotifications,
+) => {
   const { account, showAccountHostname, notifications } = props;
 
   const groupedNotifications = Object.values(

src/components/AllRead.tsx

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 import { Constants } from '../utils/constants';
 
-export const AllRead = () => {
+export const AllRead: FC = () => {
   const emoji = useMemo(
     () =>
       Constants.ALL_READ_EMOJIS[

src/components/Header.tsx

@@ -1,12 +1,12 @@
 import { ArrowLeftIcon } from '@primer/octicons-react';
-import type { ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 interface IHeader {
   children: ReactNode;
 }
 
-export const Header = ({ children }: IHeader) => {
+export const Header: FC<IHeader> = ({ children }: IHeader) => {
   const navigate = useNavigate();
   return (
     <div className="mx-8 mt-2 flex items-center justify-between py-2">

src/components/Loading.tsx

@@ -1,8 +1,8 @@
 import NProgress from 'nprogress';
-import { useContext, useEffect } from 'react';
+import { type FC, useContext, useEffect } from 'react';
 import { AppContext } from '../context/App';
 
-export const Loading = () => {
+export const Loading: FC = () => {
   const { status } = useContext(AppContext);
 
   useEffect(() => {

src/components/Logo.tsx

@@ -1,4 +1,6 @@
-interface IProps {
+import type { FC } from 'react';
+
+interface ILogo {
   isDark?: boolean;
   onClick?: () => void;
   className?: string;
@@ -10,7 +12,12 @@ const LIGHT_GRADIENT_END = '#FFFFFF';
 const DARK_GRADIENT_START = '#22283B';
 const DARK_GRADIENT_END = '#555B6E';
 
-export const Logo = ({ isDark, onClick, className = '', ...props }: IProps) => (
+export const Logo: FC<ILogo> = ({
+  isDark,
+  onClick,
+  className = '',
+  ...props
+}: ILogo) => (
   <svg
     className={className}
     onClick={() => onClick?.()}

src/components/NotificationRow.tsx

@@ -32,11 +32,13 @@ import { openNotification, openUserProfile } from '../utils/links';
 import { formatReason } from '../utils/reason';
 import { PillButton } from './buttons/PillButton';
 
-interface IProps {
+interface INotificationRow {
   notification: Notification;
 }
 
-export const NotificationRow: FC<IProps> = ({ notification }) => {
+export const NotificationRow: FC<INotificationRow> = ({
+  notification,
+}: INotificationRow) => {
   const {
     settings,
     removeNotificationFromState,

src/components/Oops.tsx

@@ -1,11 +1,11 @@
 import { type FC, useMemo } from 'react';
 import type { GitifyError } from '../types';
 
-interface IProps {
+interface IOops {
   error: GitifyError;
 }
 
-export const Oops: FC<IProps> = ({ error }) => {
+export const Oops: FC<IOops> = ({ error }: IOops) => {
   const emoji = useMemo(
     () => error.emojis[Math.floor(Math.random() * error.emojis.length)],
     [error],

src/components/Repository.tsx

@@ -11,12 +11,12 @@ import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
 
-interface IProps {
+interface IRepositoryNotifications {
   repoNotifications: Notification[];
   repoName: string;
 }
 
-export const RepositoryNotifications: FC<IProps> = ({
+export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
   repoName,
   repoNotifications,
 }) => {