feat: my likes page and redesign profile page

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

@@ -205,12 +205,12 @@ export default async function MiiPage({ params }: Props) {
 						</div>
 
 						{/* Buttons */}
-						<div className="flex w-fit bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 text-3xl text-orange-400 max-md:place-self-center *:h-12 *:w-14 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:[&_svg]:scale-[1.2]">
+						<div className="flex gap-3 w-fit bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 text-3xl text-orange-400 max-md:place-self-center *:size-12 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-xs">
 							{session && (Number(session.user.id) === mii.userId || Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) && (
 								<>
 									<Link href={`/edit/${mii.id}`}>
 										<Icon icon="mdi:pencil" />
-										<span className="text-xs">Edit</span>
+										<span>Edit</span>
 									</Link>
 									<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
 								</>
@@ -218,7 +218,7 @@ export default async function MiiPage({ params }: Props) {
 
 							<Link href={`/report/mii/${mii.id}`}>
 								<Icon icon="material-symbols:flag-rounded" />
-								<span className="text-xs">Report</span>
+								<span>Report</span>
 							</Link>
 							<ScanTutorialButton />
 						</div>

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

@@ -78,9 +78,11 @@ export default async function ProfilePage({ searchParams, params }: Props) {
 	return (
 		<div>
 			<ProfileInformation userId={user.id} />
-			<Suspense fallback={<Skeleton />}>
-				<MiiList searchParams={await searchParams} userId={user.id} />
-			</Suspense>
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
+				<Suspense fallback={<Skeleton />}>
+					<MiiList searchParams={await searchParams} userId={user.id} />
+				</Suspense>
+			</div>
 		</div>
 	);
 }

src/app/profile/likes/page.tsx

@@ -0,0 +1,48 @@
+import { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+
+import { auth } from "@/lib/auth";
+
+import ProfileInformation from "@/components/profile-information";
+import Skeleton from "@/components/mii-list/skeleton";
+import MiiList from "@/components/mii-list";
+
+interface Props {
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export const metadata: Metadata = {
+	title: "My Likes - TomodachiShare",
+	description: "View the Miis that you have liked on TomodachiShare",
+	robots: {
+		index: false,
+		follow: false,
+	},
+};
+
+export default async function ProfileSettingsPage({ searchParams }: Props) {
+	const session = await auth();
+
+	if (!session) redirect("/login");
+
+	return (
+		<div>
+			<ProfileInformation page="likes" />
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
+				<div>
+					<h2 className="text-2xl font-bold">My Likes</h2>
+					<p className="text-sm text-zinc-500">View every Mii you have liked on TomodachiShare.</p>
+				</div>
+
+				<div className="h-5 flex items-center">
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<Suspense fallback={<Skeleton />}>
+					<MiiList inLikesPage searchParams={await searchParams} />
+				</Suspense>
+			</div>
+		</div>
+	);
+}

src/app/profile/settings/page.tsx

@@ -22,7 +22,7 @@ export default async function ProfileSettingsPage() {
 
 	return (
 		<div>
-			<ProfileInformation inSettings />
+			<ProfileInformation page="settings" />
 			<ProfileSettings />
 		</div>
 	);