converted majority codebase to typescript

Author: ayushsatyam146

.eslintrc.json

@@ -15,5 +15,13 @@
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "react/prop-types": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-undef": "off"
+      }
+    }
+  ]
 }

components/AboutBlock.jsx components/AboutBlock.tsx

@@ -1,7 +1,16 @@
 import React from 'react'
 import Image from 'next/image'
 
-export const AboutBlock = ({
+interface AboutBlockProps {
+  title: string
+  description: string
+  linkTo: string
+  linkTitle: string
+  image: string
+  reverse?: boolean
+}
+
+export const AboutBlock: React.FC<AboutBlockProps> = ({
   title,
   description,
   linkTo,

components/Button.js components/Button.tsx

@@ -1,11 +1,23 @@
 import React from 'react'
+interface ButtonProps {
+  children: React.ReactNode
+  onClick: () => void
+  primary?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  customClass?: string
+}
 
-const Button = ({ children, primary, action, type, onClick, customClass }) => {
+const Button: React.FC<ButtonProps> = ({
+  children,
+  primary,
+  type,
+  onClick,
+  customClass
+}) => {
   const btnClass = primary ? 'btn-primary' : 'btn-default'
   return (
     <button
       className={`btn ${btnClass} ${customClass}`}
-      action={action}
       type={type}
       onClick={onClick}
     >

components/CategorySelector.jsx components/CategorySelector.tsx

@@ -1,7 +1,13 @@
 import React, { useContext } from 'react'
 import { AppContext } from '../utils/AppContext'
 
-export const CategorySelector = ({ disabled }) => {
+interface CategorySelectorProps {
+  disabled: boolean
+}
+
+export const CategorySelector: React.FC<CategorySelectorProps> = ({
+  disabled
+}) => {
   const { state, dispatch } = useContext(AppContext)
 
   return (
@@ -19,7 +25,7 @@ export const CategorySelector = ({ disabled }) => {
       >
         <option value='all'>All</option>
 
-        {state.iconsCategoryList.map((ele, i) => {
+        {state.iconsCategoryList.map((ele: string, i: number) => {
           return (
             <option key={i} value={ele}>
               {ele}

components/Code.js

@@ -5,10 +5,10 @@ import Button from './Button'
 import Cookies from 'js-cookie'
 
 const CookiesBanner = () => {
-  const [cookiesBanner, setCookiesBanner] = useState(false)
+  const [cookiesBanner, setCookiesBanner] = useState<boolean>(false)
 
   /* Toggle customizable functionality */
-  const cookiesHandler = (callback) => {
+  const cookiesHandler = (callback: () => void) => {
     setCookiesBanner(true)
     return callback
   }

components/Contributor.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react'
 import Button from './Button'
 import GeneratingFont from './GeneratingFont'
-import Modal from './Modal'
+import Modal from './Modal.tsx'
 import ThankYou from './ThankYou'
 import IconEditor from './IconEditor'
 import axios from 'axios'

components/CookiesBanner.js components/CookiesBanner.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import links from '../utils/Links.store'
+import Image from 'next/image'
+import Link from 'next/link'
+
+interface link {
+  name: string
+  href: string
+  category: string
+  action: string
+  label: string
+  target?: string
+}
+
+interface FooterBlockProps {
+  img?: any
+  title: string
+  links: link[]
+}
+
+const Footer: React.FC = () => {
+  return (
+    links && (
+      <footer>
+        <div className='container flex flex-wrap'>
+          <div className='container flex flex-wrap'>
+            {links.map((ele, i) => {
+              return <FooterBlock {...ele} key={i} />
+            })}
+          </div>
+          <Link href={links[0].vercel!.href}>
+            <a className='banner' target={links[0].vercel!.target}>
+              <Image
+                className=''
+                src={links[0].vercel!.img}
+                alt='vercel-banner'
+              />{' '}
+            </a>
+          </Link>
+        </div>
+      </footer>
+    )
+  )
+}
+
+const FooterBlock: React.FC<FooterBlockProps> = ({ img, title, links }) => {
+  return (
+    <div className='footer-block'>
+      <span>{img ? <Image src={img} alt='EOS Logo footer' /> : title}</span>
+      <div className='footer-block-list'>
+        {links?.map((ele, index) => (
+          <a
+            key={index}
+            href={ele.href}
+            data-types-category={ele.category}
+            data-types-label={ele.label}
+            data-types-action={ele.action}
+            rel='noopener noreferrer'
+            target={ele.target}
+          >
+            {ele.name}
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Footer

components/CustomizeIconsPanel.js

@@ -2,7 +2,7 @@ import React from 'react'
 import loading from '../public/assets/images/loading.svg'
 import Image from 'next/image'
 
-const GeneratingFont = (props) => {
+const GeneratingFont: React.FC = () => {
   return (
     <div className='icons-picker-loading'>
       <div className='loading-icon'>