78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import Image from "next/image";
|
|
import { User } from "@prisma/client";
|
|
import { Icon } from "@iconify/react";
|
|
|
|
import { auth } from "@/lib/auth";
|
|
import { prisma } from "@/lib/prisma";
|
|
import Link from "next/link";
|
|
|
|
interface Props {
|
|
user?: User;
|
|
createdAt: Date;
|
|
inSettings?: boolean;
|
|
}
|
|
|
|
export default async function ProfileInformation({ user: userData, createdAt, inSettings }: Props) {
|
|
const session = await auth();
|
|
|
|
const id = userData && userData.id ? userData.id : Number(session?.user.id);
|
|
const user = userData ? userData : session?.user;
|
|
|
|
const likedMiis = await prisma.like.count({ where: { userId: id } });
|
|
|
|
return (
|
|
<div className="flex gap-4 mb-2 max-md:flex-col">
|
|
<div className="flex w-full gap-4 overflow-x-scroll">
|
|
{/* Profile picture */}
|
|
<Image
|
|
src={user?.image ?? "/missing.svg"}
|
|
alt="profile picture"
|
|
width={128}
|
|
height={128}
|
|
className="size-32 aspect-square rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center"
|
|
/>
|
|
{/* User information */}
|
|
<div className="flex flex-col w-full relative">
|
|
<h1 className="text-4xl font-extrabold w-full break-words flex items-center gap-2">
|
|
{user?.name}
|
|
{id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
|
|
<div data-tooltip="Admin" className="font-normal text-orange-400">
|
|
<Icon icon="mdi:shield-moon" />
|
|
</div>
|
|
)}
|
|
</h1>
|
|
<h2 className="text-lg font-semibold break-words">@{user?.username}</h2>
|
|
|
|
<h4 className="mt-auto text-sm">
|
|
Liked <span className="font-bold">{likedMiis}</span> Miis
|
|
</h4>
|
|
<h4 className="text-sm" title={`${createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
|
|
Created: {createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buttons */}
|
|
<div className="flex flex-col items-end justify-end gap-1 max-md:flex-row">
|
|
{Number(session?.user.id) == id && Number(session?.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
|
|
<Link href="/admin" className="pill button !px-4">
|
|
<Icon icon="mdi:shield-moon" className="text-2xl mr-2" />
|
|
<span>Admin</span>
|
|
</Link>
|
|
)}
|
|
{!inSettings && Number(session?.user.id) == id && (
|
|
<Link href="/profile/settings" className="pill button !px-4">
|
|
<Icon icon="material-symbols:settings-rounded" className="text-2xl mr-2" />
|
|
<span>Settings</span>
|
|
</Link>
|
|
)}
|
|
{inSettings && (
|
|
<Link href={`/profile/${id}`} className="pill button !px-4">
|
|
<Icon icon="tabler:chevron-left" className="text-2xl mr-2" />
|
|
<span>Back</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|