Fix Biome useImportType, useButtonType, noUselessElse and noArrayIndexKey errors

Author: onnimonni

components/Footer.tsx

@@ -38,18 +38,16 @@ export function FooterImpl() {
       <div className={styles.copyright}>
         Copyright {currentYear} {config.author}
       </div>
-
       <div className={styles.settings}>
         {hasMounted && (
-          <a
+          <button
+            type="button"
             className={styles.toggleDarkMode}
-            href='#'
-            role='button'
             onClick={onToggleDarkMode}
             title='Toggle dark mode'
           >
             {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-          </a>
+          </button>
         )}
       </div>
 

components/NotionPageHeader.tsx

@@ -23,12 +23,13 @@ function ToggleThemeButton() {
   }, [toggleDarkMode])
 
   return (
-    <div
+    <button
+      type="button"
       className={cs('breadcrumb', 'button', !hasMounted && styles.hidden)}
       onClick={onToggleTheme}
     >
       {hasMounted && isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-    </div>
+    </button>
   )
 }
 
@@ -59,23 +60,22 @@ export function NotionPageHeader({
                 return (
                   <components.PageLink
                     href={mapPageUrl(link.pageId)}
-                    key={index}
+                    key={`nav-${link.pageId}-${link.title}`}
                     className={cs(styles.navLink, 'breadcrumb', 'button')}
                   >
                     {link.title}
                   </components.PageLink>
                 )
-              } else {
-                return (
-                  <components.Link
-                    href={link.url}
-                    key={index}
-                    className={cs(styles.navLink, 'breadcrumb', 'button')}
-                  >
-                    {link.title}
-                  </components.Link>
-                )
               }
+              return (
+                <components.Link
+                  href={link.url}
+                  key={`nav-${link.url}-${link.title}`}
+                  className={cs(styles.navLink, 'breadcrumb', 'button')}
+                >
+                  {link.title}
+                </components.Link>
+              )
             })
             .filter(Boolean)}
 

components/styles.module.css

@@ -66,7 +66,7 @@
   user-select: none;
 }
 
-.settings a,
+.settings button,
 .social a {
   cursor: pointer;
   font-size: 2em;
@@ -76,18 +76,20 @@
   transition: color 250ms ease-out;
 }
 
-.settings a:last-of-type,
+.settings button:last-of-type,
 .social a:last-of-type {
   margin-right: 0;
 }
 
-.settings a:hover,
+.settings button:hover,
 .social a:hover {
   transition: color 50ms ease-out;
 }
 
-.toggleDarkMode:hover {
-  color: #2795e9;
+.settings button {
+  /* Reset default button styles */
+  background: none;
+  border: none;
 }
 
 .twitter:hover {

lib/preview-images.ts

@@ -1,9 +1,9 @@
 import ky from 'ky'
 import lqip from 'lqip-modern'
-import {
-  type ExtendedRecordMap,
-  type PreviewImage,
-  type PreviewImageMap
+import type {
+  ExtendedRecordMap,
+  PreviewImage,
+  PreviewImageMap
 } from 'notion-types'
 import { getPageImageUrls, normalizeUrl } from 'notion-utils'
 import pMap from 'p-map'