75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { auth } from "@/lib/auth";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
import Carousel from "@/app/components/carousel";
|
|
import LikeButton from "@/app/components/like-button";
|
|
|
|
interface Props {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export default async function MiiPage({ 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,
|
|
},
|
|
},
|
|
likedBy: {
|
|
where: {
|
|
userId: Number(session?.user.id),
|
|
},
|
|
select: { userId: true },
|
|
},
|
|
_count: {
|
|
select: { likedBy: true }, // Get total like count
|
|
},
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className="flex gap-2 max-sm:flex-col">
|
|
<Carousel images={mii?.images && mii?.images.length > 0 ? mii?.images : ["/missing.webp"]} className="shadow-lg" />
|
|
|
|
<div className="flex flex-col gap-1 p-4">
|
|
<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">
|
|
{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?._count.likedBy ?? 0}
|
|
miiId={mii?.id}
|
|
isLiked={(mii?.likedBy ?? []).length > 0}
|
|
isLoggedIn={session?.user != null}
|
|
big
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|