gear from local test

components/common/GearImage.tsx

@@ -1,5 +1,6 @@
 import { useLingui } from "@lingui/react";
 import englishToInteral from "lib/englishToInternal.json";
+import Image from "next/image";
 import React from "react";
 
 interface GearImageProps {
@@ -7,22 +8,19 @@ interface GearImageProps {
   mini?: boolean;
 }
 
-// TODO: next/image
-
 const GearImage: React.FC<GearImageProps> = ({ englishName, mini }) => {
   const { i18n } = useLingui();
-  const wh = "32px";
+  const wh = mini ? 32 : 128;
 
   const key = englishName as keyof typeof englishToInteral;
   const gearInternal = englishToInteral[key];
   return (
-    <img
+    <Image
+      src={`/images/gear/${gearInternal}.png`}
       alt={i18n._(englishName)}
-      src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${gearInternal}.png`}
       title={i18n._(englishName)}
-      style={
-        mini ? { width: wh, height: wh, display: "inline-block" } : undefined
-      }
+      width={wh}
+      height={wh}
     />
   );
 };