Use next/image in more places

frontend/components/layout/Layout.tsx

@@ -38,8 +38,10 @@ export function Layout({ children }: { children: ReactNode }) {
               <S_NavGroupTitle>{navItem.title}</S_NavGroupTitle>
               {navItem.items.map((item) => (
                 <S_NavLink key={item} href="/">
-                  <S_NavLinkImage
+                  <NextImage
                     src={`/img/nav-icons/${item.replace(" ", "")}.png`}
+                    width={32}
+                    height={32}
                   />
                   {item}
                 </S_NavLink>
@@ -127,6 +129,7 @@ const S_NavItemColumn = styled("div", {
 const S_NavLink = styled("a", {
   display: "flex",
   alignItems: "center",
+  gap: "$2",
   color: "$text",
   textDecoration: "none",
   fontSize: "$sm",
@@ -139,13 +142,6 @@ const S_NavLink = styled("a", {
   },
 });
 
-// TODO: figure out whether to server items from asset or public and migrate all images there
-// + if not using next image do some adjusting of the image size, format etc.
-const S_NavLinkImage = styled("img", {
-  width: "1.75rem",
-  marginRight: "$2",
-});
-
 const S_NavGroupTitle = styled("div", {
   textTransform: "uppercase",
   fontWeight: "$bold",

frontend/components/layout/MobileNav.tsx

@@ -3,6 +3,7 @@ import { styled } from "stitches.config";
 import { navItems } from "utils/constants";
 import NextLink from "next/link";
 import { Fragment } from "react";
+import NextImage from "next/image";
 
 export function MobileNav({ isExpanded }: { isExpanded: boolean }) {
   return (
@@ -30,8 +31,10 @@ export function MobileNav({ isExpanded }: { isExpanded: boolean }) {
                           : undefined
                       }
                     >
-                      <S_NavLinkImage
+                      <NextImage
                         src={`/img/nav-icons/${item.replace(" ", "")}.png`}
+                        width={38}
+                        height={38}
                       />
                       <div>{item}</div>
                     </S_NavLink>
@@ -90,11 +93,6 @@ const S_LinksContainer = styled("div", {
   gridAutoRows: "4rem",
 });
 
-const S_NavLinkImage = styled("img", {
-  width: "2.5rem",
-  marginRight: "$3",
-});
-
 const S_GroupTitle = styled("div", {
   textTransform: "uppercase",
   alignSelf: "flex-end",
@@ -110,6 +108,7 @@ const S_GroupTitle = styled("div", {
 const S_NavLink = styled("div", {
   display: "flex",
   alignItems: "center",
+  gap: "$2",
   textTransform: "capitalize",
   borderTop: "3px solid $bgLighter",
   fontWeight: "$bold",

frontend/components/tournament/MapPoolTab.tsx

@@ -1,4 +1,5 @@
 import { styled } from "stitches.config";
+import NextImage from "next/image";
 import { useTournamentData } from "hooks/data/useTournamentData";
 import { stages, modesShort } from "@sendou-ink/shared/constants";
 import type { Mode } from "@sendou-ink/api/common";
@@ -22,17 +23,24 @@ export function MapPoolTab() {
             alt={stage}
             src={`/img/stages/${stage.replaceAll(" ", "-").toLowerCase()}.png`}
             filter={modesPerStage(data.mapPool)[stage] ? undefined : "bw"}
+            width={256}
+            height={144}
           />
           {modesPerStage(data.mapPool)[stage] && (
             <S_ModeImagesContainer>
               {modesShort.map((mode) => {
-                if (!modesPerStage(data.mapPool)[stage]?.includes(mode as Mode))
+                if (
+                  !modesPerStage(data.mapPool)[stage]?.includes(mode as Mode)
+                ) {
                   return null;
+                }
                 return (
-                  <S_ModeImage
+                  <NextImage
                     key={mode}
                     src={`/img/modes/${mode}.png`}
                     alt={mode}
+                    width={28}
+                    height={28}
                   />
                 );
               })}
@@ -64,15 +72,12 @@ const S_InfoSquare = styled("div", {
   fontSize: "$xl",
   backgroundImage: `url(/svg/background-pattern.svg)`,
   backgroundColor: "$bgLighter",
-
-  "@xs": {
-    borderRadius: "$rounded",
-  },
+  borderRadius: "$rounded",
 });
 
 const S_Container = styled("div", {
   display: "grid",
-  gridTemplateColumns: "1fr",
+  gridTemplateColumns: "repeat(2, 1fr)",
   gap: "1rem",
 
   "@xs": {
@@ -92,12 +97,8 @@ const S_StageImageContainer = styled("div", {
   position: "relative",
 });
 
-const S_StageImage = styled("img", {
-  width: "100%",
-
-  "@xs": {
-    borderRadius: "$rounded",
-  },
+const S_StageImage = styled(NextImage, {
+  borderRadius: "$rounded",
 
   variants: {
     filter: {
@@ -115,9 +116,6 @@ const S_ModeImagesContainer = styled("div", {
   top: 0,
   left: 0,
   borderRadius: "$rounded 0 $rounded 0",
-});
-
-const S_ModeImage = styled("img", {
-  width: "2.5rem",
   padding: "$1",
+  gap: "$2",
 });

frontend/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    formats: ["image/avif", "image/webp"],
+  },
+};