/ja progress

components/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,113 @@
+import styles from "./ProfileCard.module.scss";
+
+type UserProfileCardProps = {
+	username: string;
+	description?: string;
+	picture?: string | null;
+	isAdmin?: boolean;
+	isDeveloper?: boolean;
+	experience?: {
+		level: number;
+		tilNextLevel?: number;
+		looseXP?: number;
+	};
+	badges?: {
+		badgeName: string;
+		badgeDesc?: string;
+		badgeMerit?: string;
+		badgeImage?: string;
+	}[];
+	accentColor?: string;
+};
+
+let placeholderPicture = "https://placewaifu.com/image/128?greyscale&blur";
+
+const ProfileCard = (user: UserProfileCardProps) => {
+	return (
+		<>
+			<div className={styles.profile}>
+				<article>
+					<img src={user.picture || placeholderPicture} alt={user.username} />
+					<div className={styles.inner}>
+						<header>
+							<h1>{user.username}</h1>
+							<p>
+								{user.experience?.level && (
+									<>
+										{"LVL "}
+										<span>{user.experience.level}</span>
+									</>
+								)}
+							</p>
+						</header>
+						<p>{user.description}</p>
+						<div className={styles.badges}>
+							{user.isAdmin && (
+								<div className={styles.badge}>
+									<div
+										className={styles.dot}
+										style={{ background: user.accentColor }}
+									/>
+									Admin
+								</div>
+							)}
+							{user.isDeveloper && (
+								<div className={styles.badge}>
+									<div
+										className={styles.dot}
+										style={{ background: user.accentColor }}
+									/>
+									DEV
+								</div>
+							)}
+						</div>
+					</div>
+				</article>
+				{user.experience?.looseXP && user.experience.tilNextLevel && (
+					<div className={styles.xpinfo}>
+						<p>XP: {user.experience.looseXP}</p>
+						<p>XP until next level: {user.experience.tilNextLevel} </p>
+					</div>
+				)}
+				{user.experience?.looseXP && user.experience.tilNextLevel && (
+					<div className={styles.xpbar}>
+						<div
+							className={styles.xpinner}
+							style={{
+								background: user.accentColor,
+								width:
+									(
+										(user.experience.looseXP /
+											(user.experience.looseXP +
+												user.experience.tilNextLevel)) *
+										100
+									).toString() + "%",
+							}}
+						/>
+					</div>
+				)}
+				<footer>
+					{user.badges
+						?.slice(0, 1)
+						.map(
+							(el: {
+								badgeName: string;
+								badgeDesc?: string;
+								badgeMerit?: string;
+								badgeImage?: string;
+							}) => {
+								return (
+									<section>
+										<h3>{el.badgeName}</h3>
+										<p>{el.badgeDesc}</p>
+									</section>
+								);
+							}
+						)}
+				</footer>
+			</div>
+		</>
+	);
+};
+
+export { ProfileCard };