From 240bf1c79031088567b16d3ca1b04e4d10e81a5a Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Wed, 26 Apr 2023 22:41:33 +0100
Subject: [PATCH] Updated because of the default use

---
 src/components/ProfileLevel.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ProfileLevel.tsx b/src/components/ProfileLevel.tsx
index a0cf7b3b..b3667008 100644
--- a/src/components/ProfileLevel.tsx
+++ b/src/components/ProfileLevel.tsx
@@ -4,6 +4,7 @@ import {levelCalculator} from "@/resources/level";
 import clsx from "clsx";
 import LevelLabel from "./LevelLabel";
 import LevelProgressBar from "./LevelProgressBar";
+import {Avatar} from "primereact/avatar";
 
 interface Props {
 	user: User;
@@ -15,8 +16,11 @@ export default function ProfileLevel({user, className}: Props) {
 
 	return (
 		<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
-			<div className="w-24 rounded-full">
-				<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
+			<div className="w-16 md:w-24 h-16 md:h-24 rounded-full">
+				{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full" />}
+				{user.profilePicture.length === 0 && (
+					<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
+				)}
 			</div>
 			<div className="flex flex-col gap-1 items-center">
 				<LevelLabel experience={user.experience} />