KirdesMF

import { useState } from 'react';
import { checkErrorsInput, checkErrorsForm } from 'utils/checkForm';

const useForm = (
   initState = {
      errors: {},
      values: {},
      isSubmitted: false,
      isFormValid: false,
   }

KirdesMF

export const checkErrorsInput = (name, value) => {
   let errors = {};

   const options = {
      isRequired: value.length === 0,
      isInvalidName: value.length < 5,
      isInvalidMessage: value.length < 15,
      isInvalidMail: !/\S+@\S+\.\S+/.test(String(value).toLocaleLowerCase()),
      isInvalidPhone: !/\b[\d]{10}\b/.test(value),
   };

KirdesMF

import * as React from 'react';

import styled from 'styled-components';

import Routes from './Routes/Routes';

import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Nav from './components/Nav/Nav';

KirdesMF

import { useState, useEffect } from 'react';

const useMatchMedia = (mediaQuery: string) => {
   const [isMatches, setIsMatches] = useState(
      window.matchMedia(mediaQuery).matches
   );

   useEffect(() => {
      const updateStateisMatches = (event: MediaQueryListEvent) =>
         setIsMatches(event.matches);

KirdesMF

/// <reference types="styled-components" />

import 'styled-components';
import { DefaultTheme } from 'styled-components';

export type ColorsThemeType = {
   home: string;
   about: string;
   works: string;
   contact: string;

KirdesMF

/**============== Avoid doing things weird with never ===========================*/

type Exact<A, B> = A extends B ? (B extends A ? A : never) : never;

// This basically says that if and A extends B and B extends A then the types are identical, 
// neither are a subset or superset of the other. 
// So it should allow that type through. 
// If they are not identical, then the type is never which prevents that type from being allowed.
// Now you just need to make your function generic, and enforce that argument to exactly the right type:

KirdesMF

import React from 'react';
import styled from 'styled-components';
import { ColorsType } from 'Theme/colors';
import { icons, NameIconType } from './icons';

/**
 * Define Props for Icon component
 */
type IconProps = {
   /**

KirdesMF

const Container = styled.header`
   position: fixed;
   top: 0;

   height: 10%;
   width: 100%;

   display: grid;
   grid-template-areas: 'social . nav .';
   grid-template-columns: 15% 1fr 1fr 15%;

KirdesMF

import React, { useState } from 'react';
import useMatchMedia from 'hooks/useMatchMedia';
import { breakpoints } from 'Theme/breakpoints';

type ThemeStateType = 'light' | 'dark' | 'contrast';

export type MainContextType = {
   theme: ThemeStateType;
   setTheme: (value: ThemeStateType) => void;
   medium: boolean;

KirdesMF

import React, { useState, useEffect } from 'react';
import { SPagination } from './Pagination.styled';
import { motion } from 'framer-motion';
import usePathName from 'hooks/usePathName';
import { useRouter } from 'next/router';

//TODO animate pagination
const links: URLType[] = ['/', '/home', '/about', '/works', '/contact'];

function Pagination() {