fix lint issues

Author: KurtGokhan

src/components/MDX/CodeDiagram.tsx

@@ -2,8 +2,8 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import { Children } from 'react';
 import * as React from 'react';
+import { Children } from 'react';
 import CodeBlock from './CodeBlock';
 
 interface CodeDiagramProps {
@@ -15,14 +15,17 @@ export function CodeDiagram({ children, flip = false }: CodeDiagramProps) {
   const illustration = Children.toArray(children).filter((child: any) => {
     return child.type === 'img';
   });
-  const content = Children.toArray(children).map((child: any) => {
+  const content = Children.toArray(children).map((child: any, i) => {
+    let ch = null;
     if (child.type?.mdxName === 'pre') {
-      return <CodeBlock {...child.props} noMargin={true} noMarkers={true} />;
+      ch = <CodeBlock {...child.props} noMargin={true} noMarkers={true} />;
     } else if (child.type === 'img') {
-      return null;
+      ch = null;
     } else {
-      return child;
+      ch = child;
     }
+
+    return <React.Fragment key={i}>{ch}</React.Fragment>;
   });
   if (flip) {
     return (

src/components/MDX/MDXComponents.tsx

@@ -192,7 +192,7 @@ function AuthorCredit({
 }) {
   return (
     <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
-      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight dark:text-secondary-dark p-2 rounded-lg absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight p-2 rounded-lg absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
         <cite>
           Illustrated by{' '}
           {authorLink ? (
@@ -236,6 +236,7 @@ function Illustration({
   return (
     <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={src}
           alt={alt}
@@ -272,6 +273,7 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img src={info.src} alt={info.alt} height={info.height} />
       </div>
       {info.caption ? (

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -33,7 +33,6 @@ const getFileName = (filePath: string): string => {
 };
 
 export function NavigationBar({
-  providedFiles,
 }: {
   providedFiles: Array<string>;
 }) {

src/components/Sponsor.tsx

@@ -28,10 +28,11 @@ export function Sponsor({
         className,
         'text-base flex-row leading-tight font-bold border rounded-md py-5 px-5 inline-flex items-center my-1',
       )}>
-      <img src={image} className='w-16 h-16 mr-4' />
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={image} alt={title} className='w-16 h-16 mr-4' />
       <div className={'flex-col'}>
         <div className={'text-lg font-bold'}>{title}</div>
-        <div className={'text-sm'}>{children}</div>
+        {!!children && <div className={'text-sm'}>{children}</div>}
       </div>
     </a>
   );

src/hooks/usePendingRoute.ts

@@ -3,7 +3,7 @@
  */
 
 import { useRouter } from 'next/router';
-import { useState, useRef, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const usePendingRoute = () => {
   const { events } = useRouter();
@@ -33,7 +33,7 @@ const usePendingRoute = () => {
       events.off('routeChangeComplete', handleRouteChangeComplete);
       clearTimeout(routeTransitionTimer);
     };
-  }, []);
+  }, [events]);
 
   return pendingRoute;
 };