80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { auth } from "@/auth";
|
||
import { prisma } from "@/lib/prisma";
|
||
import Image from "next/image";
|
||
import { redirect } from "next/navigation";
|
||
import { updateMinecraftName } from "../actions";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
export const metadata = { title: "Profil | Dashboard" };
|
||
|
||
export default async function ProfilPage() {
|
||
const session = await auth();
|
||
if (!session) redirect("/");
|
||
|
||
const user = await prisma.user.findUnique({
|
||
where: { email: session.user!.email! },
|
||
});
|
||
|
||
return (
|
||
<section className="mx-auto max-w-lg px-4 py-10">
|
||
<h1 className="mb-6 text-2xl font-bold">Profil</h1>
|
||
|
||
<div className="card space-y-8">
|
||
{/* avatar Discord */}
|
||
<div className="flex items-center gap-4">
|
||
<Image
|
||
src={session.user?.image ?? ""}
|
||
alt=""
|
||
width={56}
|
||
height={56}
|
||
className="rounded-full"
|
||
/>
|
||
<div>
|
||
<p className="text-lg font-semibold">{session.user?.name}</p>
|
||
<p className="text-sm text-white/60">{session.user?.email}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* pseudo Minecraft */}
|
||
<form action={updateMinecraftName} className="space-y-4">
|
||
<label className="mb-1 block text-sm text-white/70">
|
||
Pseudo Minecraft
|
||
</label>
|
||
|
||
<div className="relative w-full max-w-md">
|
||
{user?.mcName && (
|
||
<Image
|
||
src={`https://mc-heads.net/avatar/${user.mcName}/28`}
|
||
alt=""
|
||
width={28}
|
||
height={28}
|
||
className="absolute left-2 top-1/2 -translate-y-1/2 rounded"
|
||
unoptimized
|
||
/>
|
||
)}
|
||
|
||
{/* padding-left 48 px pour laisser la place à l’avatar */}
|
||
<input
|
||
name="mcName"
|
||
defaultValue={user?.mcName ?? ""}
|
||
placeholder="Pseudo MC"
|
||
required
|
||
pattern="[A-Za-z0-9_]{3,16}"
|
||
disabled={Boolean(user?.mcName)}
|
||
className="input pl-12 disabled:opacity-60"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={Boolean(user?.mcName)}
|
||
className="rounded bg-indigo-600 px-4 py-2 text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
|
||
>
|
||
Enregistrer
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|