fix: build errors

src/app/components/carousel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { Icon } from "@iconify/react";
@@ -30,7 +31,7 @@ export default function Carousel({ images, className }: Props) {
 				<div className="flex">
 					{images.map((src, index) => (
 						<div key={index} className="flex-[0_0_100%]">
-							<img src={src} alt="" className="w-full h-auto aspect-[3/2] object-contain" />
+							<Image src={src} alt="mii image" width={480} height={320} className="w-full h-auto aspect-[3/2] object-contain" />
 						</div>
 					))}
 				</div>

src/app/components/mii-list.tsx

@@ -11,7 +11,7 @@ interface Props {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 	// for use on profiles
 	userId?: number;
-	where?: Record<string, any>;
+	where?: Record<string, object>;
 }
 
 export default async function MiiList({ searchParams, userId, where }: Props) {

src/app/components/submit-form.tsx

@@ -17,6 +17,7 @@ import TagSelector from "./submit/tag-selector";
 import ImageList from "./submit/image-list";
 import QrUpload from "./submit/qr-upload";
 import QrScanner from "./submit/qr-scanner";
+import Image from "next/image";
 
 export default function SubmitForm() {
 	const [files, setFiles] = useState<FileWithPath[]>([]);
@@ -114,7 +115,7 @@ export default function SubmitForm() {
 				generatedCode.make();
 
 				setGeneratedQrCodeUrl(generatedCode.createDataURL());
-			} catch (error) {
+			} catch {
 				setError("Failed to get and/or generate Mii images");
 			}
 		};
@@ -128,11 +129,23 @@ export default function SubmitForm() {
 				<div className="flex justify-center gap-2">
 					<div className="relative flex justify-center items-center size-32 aspect-square bg-orange-100 rounded-xl border-2 border-amber-500">
 						{!studioUrl && <span className="absolute text-center font-light">Mii</span>}
-						<img src={studioUrl} alt="Nintendo Studio URL" className="size-full rounded-xl text-[0px]" />
+						<Image
+							src={studioUrl ?? "/missing.webp"}
+							width={128}
+							height={128}
+							alt="Nintendo Studio URL"
+							className="size-full rounded-xl text-[0px]"
+						/>
 					</div>
 					<div className="relative flex justify-center items-center size-32 aspect-square bg-orange-100 rounded-xl border-2 border-amber-500">
 						{!generatedQrCodeUrl && <span className="absolute text-center font-light">QR Code</span>}
-						<img src={generatedQrCodeUrl} alt="Generated QR Code" className="size-full rounded-xl text-[0px]" />
+						<Image
+							src={generatedQrCodeUrl ?? "/missing.webp"}
+							width={128}
+							height={128}
+							alt="Generated QR Code"
+							className="size-full rounded-xl text-[0px]"
+						/>
 					</div>
 				</div>
 

src/app/components/submit/image-list.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { FileWithPath } from "react-dropzone";
 import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
 import { Icon } from "@iconify/react";
@@ -37,7 +38,7 @@ export default function ImageList({ files, setFiles }: Props) {
 										{...provided.draggableProps}
 										className="w-full p-4 rounded-xl bg-orange-100 border-2 border-amber-500 flex gap-2 shadow-md my-1"
 									>
-										<img
+										<Image
 											src={URL.createObjectURL(file)}
 											alt={file.name}
 											className="aspect-[3/2] object-contain w-24 rounded-md bg-orange-300 border-2 border-orange-400"

src/app/components/submit/qr-scanner.tsx

@@ -97,12 +97,12 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 				setSelectedDeviceId(videoDevices[0].deviceId);
 			}
 		});
-	}, [isOpen]);
+	}, [isOpen, selectedDeviceId]);
 
 	useEffect(() => {
 		if (!isOpen && !permissionGranted) return;
 		requestRef.current = requestAnimationFrame(scanQRCode);
-	}, [permissionGranted]);
+	}, [isOpen, permissionGranted, scanQRCode]);
 
 	if (!isOpen) return null;
 

src/app/components/submit/qr-upload.tsx

@@ -12,34 +12,37 @@ interface Props {
 export default function QrUpload({ setQrBytesRaw }: Props) {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 
-	const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {
-		acceptedFiles.forEach((file) => {
-			// Scan QR code
-			const reader = new FileReader();
-			reader.onload = async (event) => {
-				const image = new Image();
-				image.onload = () => {
-					const canvas = canvasRef.current;
-					if (!canvas) return;
+	const onDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			acceptedFiles.forEach((file) => {
+				// Scan QR code
+				const reader = new FileReader();
+				reader.onload = async (event) => {
+					const image = new Image();
+					image.onload = () => {
+						const canvas = canvasRef.current;
+						if (!canvas) return;
 
-					const ctx = canvas.getContext("2d");
-					if (!ctx) return;
+						const ctx = canvas.getContext("2d");
+						if (!ctx) return;
 
-					canvas.width = image.width;
-					canvas.height = image.height;
-					ctx.drawImage(image, 0, 0, image.width, image.height);
+						canvas.width = image.width;
+						canvas.height = image.height;
+						ctx.drawImage(image, 0, 0, image.width, image.height);
 
-					const imageData = ctx.getImageData(0, 0, image.width, image.height);
-					const code = jsQR(imageData.data, image.width, image.height);
-					if (!code) return;
+						const imageData = ctx.getImageData(0, 0, image.width, image.height);
+						const code = jsQR(imageData.data, image.width, image.height);
+						if (!code) return;
 
-					setQrBytesRaw(code.binaryData!);
+						setQrBytesRaw(code.binaryData!);
+					};
+					image.src = event.target!.result as string;
 				};
-				image.src = event.target!.result as string;
-			};
-			reader.readAsDataURL(file);
-		});
-	}, []);
+				reader.readAsDataURL(file);
+			});
+		},
+		[setQrBytesRaw]
+	);
 
 	const { getRootProps, getInputProps } = useDropzone({
 		onDrop,

src/app/components/submit/tag-selector.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useState, KeyboardEvent } from "react";
-import { useCombobox, useMultipleSelection } from "downshift";
+import React, { useState } from "react";
+import { useCombobox } from "downshift";
 import { Icon } from "@iconify/react";
 
 interface Props {
@@ -135,7 +135,7 @@ export default function TagSelector({ tags, setTags }: Props) {
 								setInputValue("");
 							}}
 						>
-							Add "{inputValue}"
+							Add "{inputValue}"
 						</li>
 					)}
 				</ul>