feat: mii pages

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>
+	);
+}