add user profile page
This commit is contained in:
Nathaniel Tampus
8
client/src/app/user/[name]/not-found.tsx
Normal file
8
client/src/app/user/[name]/not-found.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<div className="text-2xl font-bold">Error 404</div>
|
||||
<div className="text-xl">User not found</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
client/src/app/user/[name]/page.tsx
Normal file
158
client/src/app/user/[name]/page.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import CopyLink from "@/components/user/CopyLink";
|
||||
import { fetchProfileData } from "@/lib/user";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export async function generateMetadata({ params }: { params: { name: string } }) {
|
||||
const data = await fetchProfileData(params.name);
|
||||
if (!data) {
|
||||
return {
|
||||
description: "User not found",
|
||||
robots: {
|
||||
index: false,
|
||||
follow: false,
|
||||
nocache: true,
|
||||
noarchive: true
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: `${data.name} | chessu`,
|
||||
description: `${data.name}'s profile`,
|
||||
openGraph: {
|
||||
title: `${data.name} | chessu`,
|
||||
description: `${data.name}'s profile on chessu`,
|
||||
url: `https://ches.su/user/${data.name}`,
|
||||
siteName: "chessu",
|
||||
locale: "en_US",
|
||||
type: "website"
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: false,
|
||||
nocache: true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Profile({ params }: { params: { name: string } }) {
|
||||
const data = await fetchProfileData(params.name);
|
||||
if (!data) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-8 flex w-full flex-col gap-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 md:gap-8">
|
||||
<h1 className="text-4xl font-bold">{data.name}</h1>
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-sm">Wins</span>
|
||||
<span className="text-xl font-bold">{data.wins}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-sm">Draws</span>
|
||||
<span className="text-xl font-bold">{data.draws}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-sm">Losses</span>
|
||||
<span className="text-xl font-bold">{data.losses}</span>
|
||||
</div>
|
||||
</div>
|
||||
<CopyLink name={data.name as string} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="mb-1 text-lg font-bold">Recent games</h2>
|
||||
<ul className="bg-base-300 flex h-[60vh] flex-col gap-1 overflow-y-scroll rounded-lg">
|
||||
{data.recentGames.map((game) => (
|
||||
<li
|
||||
key={game.id}
|
||||
className="border-base-100 flex flex-wrap items-center justify-between gap-8 border-b-2 p-3"
|
||||
>
|
||||
<div className="flex w-72 justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="flex items-center gap-1 text-sm">
|
||||
White
|
||||
{game.winner === "white" && (
|
||||
<span className="badge badge-xs badge-success">winner</span>
|
||||
)}
|
||||
</span>
|
||||
<a
|
||||
className={
|
||||
"font-bold" +
|
||||
(typeof game.white?.id === "number"
|
||||
? " text-primary link-hover"
|
||||
: " cursor-default")
|
||||
}
|
||||
href={
|
||||
typeof game.white?.id === "number" && game.white?.id !== data.id
|
||||
? `/user/${game.white?.name}`
|
||||
: undefined
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{game.white?.name}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="flex items-center gap-1 text-sm">
|
||||
{game.winner === "black" && (
|
||||
<span className="badge badge-xs badge-success">winner</span>
|
||||
)}
|
||||
Black
|
||||
</span>
|
||||
<a
|
||||
className={
|
||||
"font-bold" +
|
||||
(typeof game.black?.id === "number"
|
||||
? " text-primary link-hover"
|
||||
: " cursor-default")
|
||||
}
|
||||
href={
|
||||
typeof game.black?.id === "number" && game.black?.id !== data.id
|
||||
? `/user/${game.black?.name}`
|
||||
: undefined
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{game.black?.name}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow text-end text-xs">{game.endReason}</div>
|
||||
|
||||
<div className="flex flex-grow flex-col text-end">
|
||||
<span className="text-xs">
|
||||
Started
|
||||
<span className="font-bold">
|
||||
{" "}
|
||||
{new Date(game.startedAt as number).toLocaleString()}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-xs">
|
||||
Ended
|
||||
<span className="font-bold">
|
||||
{" "}
|
||||
{new Date(game.endedAt as number).toLocaleString()}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
className="btn btn-ghost flex-grow"
|
||||
href={`/archive/${game.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Review game
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
client/src/components/user/CopyLink.tsx
Normal file
37
client/src/components/user/CopyLink.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { IconCopy } from "@tabler/icons-react";
|
||||
|
||||
export default function CopyLink({ name }: { name: string }) {
|
||||
const [copiedLink, setCopiedLink] = useState(false);
|
||||
|
||||
function copyLink() {
|
||||
const text = `https://ches.su/user/${name}`;
|
||||
|
||||
if ("clipboard" in navigator) {
|
||||
navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
document.execCommand("copy", true, text);
|
||||
}
|
||||
setCopiedLink(true);
|
||||
setTimeout(() => {
|
||||
setCopiedLink(false);
|
||||
}, 5000);
|
||||
}
|
||||
return (
|
||||
<div className={"dropdown dropdown-top dropdown-end" + (copiedLink ? " dropdown-open" : "")}>
|
||||
<label
|
||||
tabIndex={0}
|
||||
className="badge badge-md bg-base-300 text-base-content h-8 gap-1 font-mono text-xs sm:h-5 sm:text-sm"
|
||||
onClick={copyLink}
|
||||
>
|
||||
<IconCopy size={16} />
|
||||
ches.su/user/{name}
|
||||
</label>
|
||||
<div tabIndex={0} className="dropdown-content badge badge-neutral text-xs shadow">
|
||||
copied to clipboard
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user