feat: add mii images to carousel and add mii info to mii page

src/app/components/mii-list.tsx

@@ -132,7 +132,7 @@ export default async function MiiList({ searchParams, userId, where }: Props) {
 							key={mii.id}
 							className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
 						>
-							<Carousel images={mii.images.length > 0 ? mii.images : ["/missing.webp"]} />
+							<Carousel images={[`/mii/${mii.id}/mii.webp`, `/mii/${mii.id}/qr-code.webp`, ...mii.images]} />
 
 							<div className="p-4 flex flex-col gap-1 h-full">
 								<Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis line-clamp-2" title={mii.name}>

src/app/mii/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
@@ -42,38 +43,77 @@ export default async function MiiPage({ params }: Props) {
 
 	if (!mii) redirect("/404");
 
+	const images = [`/mii/${mii.id}/mii.webp`, `/mii/${mii.id}/qr-code.webp`, ...mii.images];
+
 	return (
-		<div className="flex gap-2 max-sm:flex-col">
+		<div>
-			<Carousel images={mii?.images && mii?.images.length > 0 ? mii?.images : ["/missing.webp"]} className="shadow-lg" />
+			<div className="relative grid grid-cols-5 gap-2 max-sm:grid-cols-1 max-lg:grid-cols-2">
+				<div className="min-w-full flex justify-center col-span-2 max-lg:col-span-1">
+					<Carousel images={images} className="shadow-lg" />
+				</div>
 
-			<div className="flex flex-col gap-1 p-4">
+				<div className="flex flex-col gap-1 p-4 col-span-2 max-lg:col-span-1">
-				<h1 className="text-5xl font-extrabold break-words">{mii?.name}</h1>
+					<h1 className="text-5xl font-extrabold break-words">{mii?.name}</h1>
-				<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
+					<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
-					{mii?.tags.map((tag) => (
+						{mii?.tags.map((tag) => (
-						<Link href={{ pathname: "/", query: { tags: tag } }} key={tag}>
+							<Link href={{ pathname: "/", query: { tags: tag } }} key={tag}>
-							{tag}
+								{tag}
+							</Link>
+						))}
+					</div>
+
+					<div className="mt-2">
+						<Link href={`/profile/${mii?.userId}`} className="text-lg">
+							By: <span className="font-bold">@{mii?.user.username}</span>
 						</Link>
+						<h4 title={`${mii?.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
+							Created: {mii?.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
+						</h4>
+					</div>
+
+					<div className="mt-auto">
+						<LikeButton
+							likes={mii?._count.likedBy ?? 0}
+							miiId={mii?.id}
+							isLiked={(mii?.likedBy ?? []).length > 0}
+							isLoggedIn={session?.user != null}
+							big
+						/>
+					</div>
+				</div>
+
+				<section className="p-6 bg-orange-100 rounded-2xl shadow-lg border-2 border-orange-400 h-min">
+					<legend className="text-lg font-semibold mb-2">Mii Info</legend>
+					<ul className="text-sm *:flex *:justify-between *:items-center">
+						<li>
+							Name:{" "}
+							<span className="text-right">
+								{mii.firstName} {mii.lastName}
+							</span>
+						</li>
+						<li>
+							From: <span className="text-right">{mii.islandName} Island</span>
+						</li>
+						<li>
+							Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox" />
+						</li>
+					</ul>
+				</section>
+			</div>
+
+			<div className="overflow-x-scroll">
+				<div className="flex gap-2 w-max py-4">
+					{images.map((src, index) => (
+						<Image
+							key={index}
+							src={src}
+							width={256}
+							height={1}
+							alt="mii screenshots"
+							className="rounded-xl bg-zinc-300 border-2 border-zinc-300 shadow-md aspect-[3/2] h-full object-contain"
+						/>
 					))}
 				</div>
-
-				<div className="mt-2">
-					<Link href={`/profile/${mii?.userId}`} className="text-lg">
-						By: <span className="font-bold">@{mii?.user.username}</span>
-					</Link>
-					<h4 title={`${mii?.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
-						Created: {mii?.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
-					</h4>
-				</div>
-
-				<div className="mt-auto">
-					<LikeButton
-						likes={mii?._count.likedBy ?? 0}
-						miiId={mii?.id}
-						isLiked={(mii?.likedBy ?? []).length > 0}
-						isLoggedIn={session?.user != null}
-						big
-					/>
-				</div>
 			</div>
 		</div>
 	);