feat: mii pages

src/app/components/like-button.tsx

@@ -7,9 +7,10 @@ import { Icon } from "@iconify/react";
 interface Props {
 	likes: number;
 	isLoggedIn: boolean;
+	big?: boolean;
 }
 
-export default function LikeButton({ likes, isLoggedIn }: Props) {
+export default function LikeButton({ likes, isLoggedIn, big }: Props) {
 	const [isLiked, setIsLiked] = useState(false);
 	const [likesState, setLikesState] = useState(likes);
 
@@ -23,7 +24,7 @@ export default function LikeButton({ likes, isLoggedIn }: Props) {
 	};
 
 	return (
-		<button onClick={onClick} className="flex items-center gap-2 text-xl text-red-400 cursor-pointer">
+		<button onClick={onClick} className={`flex items-center gap-2 text-red-400 cursor-pointer ${big ? "text-3xl" : "text-xl"}`}>
 			<Icon icon={isLiked ? "icon-park-solid:like" : "icon-park-outline:like"} />
 			<span>{likesState}</span>
 		</button>

src/app/components/mii-list.tsx

@@ -104,11 +104,13 @@ export default async function MiiList({ searchParams, userId }: 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"
 					>
-						<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl" />
+						<Link href={`/mii/${mii.id}`}>
+							<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl" />
+						</Link>
 						<div className="p-4 flex flex-col gap-1 h-full">
-							<h3 className="font-bold text-2xl overflow-hidden text-ellipsis line-clamp-2" title={mii.name}>
+							<Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis line-clamp-2" title={mii.name}>
 								{mii.name}
-							</h3>
+							</Link>
 							<div id="tags" className="flex gap-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
 								{mii.tags.map((tag) => (
 									<Link href={{ query: { tags: tag } }} key={tag}>

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

@@ -0,0 +1,58 @@
+import Link from "next/link";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+import LikeButton from "@/app/components/like-button";
+
+interface Props {
+	params: Promise<{ slug: string }>;
+}
+
+export default async function ProfilePage({ params }: Props) {
+	const { slug } = await params;
+	const session = await auth();
+
+	const mii = await prisma.mii.findFirst({
+		where: {
+			id: Number(slug),
+		},
+		include: {
+			user: {
+				select: {
+					id: true,
+					username: true,
+				},
+			},
+		},
+	});
+
+	return (
+		<div className="flex gap-2">
+			<img src="https://placehold.co/400x300" alt="mii" className="rounded-xl" />
+			<div className="flex flex-col gap-1 p-4">
+				<h1 className="text-5xl font-extrabold">{mii?.name}</h1>
+				<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
+					{mii?.tags.map((tag) => (
+						<Link href={{ pathname: "/", query: { tags: tag } }} key={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?.likes ?? 0} isLoggedIn={session?.user != null} big />
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { prisma } from "@/lib/prisma";
+
 import MiiList from "@/app/components/mii-list";
 
 interface Props {