tsconfig.json strictest

src/about/AboutPage.tsx

@@ -2,7 +2,7 @@ import "./about.scss";
 import openingImage from "../img/IMG_20240725_175449_803.jpg";
 import rainbow from "../img/IMG-0186.jpg";
 import japanese from "../img/IMG_20230531_000224_01.jpg";
-import {PropsWithChildren} from "react";
+import type {PropsWithChildren} from "react";
 
 export default function AboutPage() {
   return <main className="about-page">

src/index/Canvas.tsx

@@ -1,8 +1,7 @@
 import {motion} from "framer-motion";
 import "./canvas.scss";
 import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
-import React, {useMemo, useRef, useState} from "react";
-import {Mesh, Vector3} from "three";
+import {Vector3} from "three";
 import {Moon} from "./Moon";
 import {Stars} from "./Stars";
 

src/index/Moon.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef, useState} from "react";
+import {useRef, useState} from "react";
 import {Mesh} from "three";
 import {useFrame} from "@react-three/fiber";
 

src/nav/Links.tsx

@@ -1,9 +1,9 @@
-import React, {useState} from "react";
+import {useState} from "react";
 import {Link} from "../router/Link";
 import {motion} from "framer-motion";
 
 export function Links() {
-  const [links, setLinks] = useState(["About", "Articles"]);
+  const [links] = useState(["About", "Articles"]);
 
   return <div className="links">
     { links.map(() => /* add spacers for flexbox */ <div/> )}

src/nav/Nav.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import {useState} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBars} from "@fortawesome/free-solid-svg-icons/faBars";
 import {Menu} from "./Menu";

src/router/RouterContext.tsx

@@ -1,4 +1,4 @@
-import {createContext, PropsWithChildren, useContext, useEffect, useState, useSyncExternalStore} from "react";
+import {createContext, PropsWithChildren, useContext, useEffect, useState, } from "react";
 import {DEFAULT, Path, Router} from "./router";
 
 const RouterContext = createContext<Router>(DEFAULT);