30 lines
989 B
TypeScript
30 lines
989 B
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import {User} from "@/interfaces/user";
|
|
import clsx from "clsx";
|
|
import LevelLabel from "./LevelLabel";
|
|
import LevelProgressBar from "./LevelProgressBar";
|
|
|
|
interface Props {
|
|
user: User;
|
|
className: string;
|
|
}
|
|
|
|
export default function ProfileCard({user, className}: Props) {
|
|
return (
|
|
<div className={clsx("bg-white drop-shadow-xl p-8 rounded-xl w-full flex flex-col gap-6", className)}>
|
|
<div className="flex w-full items-center gap-8">
|
|
<div className="w-24 rounded-full border-4 border-white drop-shadow-xl">
|
|
<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
|
|
</div>
|
|
<div className="flex flex-col justify-center">
|
|
<span className="text-neutral-600 font-bold text-2xl">
|
|
{user.name.first} {user.name.last}
|
|
</span>
|
|
<LevelLabel experience={user.experience} />
|
|
</div>
|
|
</div>
|
|
<LevelProgressBar experience={user.experience} progressBarWidth="w-96" />
|
|
</div>
|
|
);
|
|
}
|