archiwum/web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/ja progress

Browse Source
This commit is contained in:
jakubmanczak
2022-12-29 17:21:34 +01:00
parent 7a03f14e7c
commit 72567fef84
4 changed files with 258 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/ProfileCard/ProfileCard.module.scss Normal file
View File

@@ -0,0 +1,102 @@
.profile {
margin: 2rem 0;
background: var(--black1);
border-radius: 8px;
box-shadow: var(--shadow0);
article {
display: flex;
flex-direction: row;
padding: 1.5rem 1.5rem 1rem 1.5rem;
gap: 1rem;
background-color: var(--black2);
border-radius: 8px 8px 0 0;
@media screen and (max-width: 400px) {
flex-direction: column;
justify-content: center;
}
img {
border-radius: 50%;
height: 128px;
width: 128px;
@media screen and (max-width: 600px) {
height: 64px;
width: 64px;
}
}
.inner {
width: 100%;
header {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
width: 100%;
h1 {
font-size: 2rem;
}
p {
font-family: var(--fonts-bold);
span {
font-size: 2rem;
}
}
}
.badges {
display: flex;
flex-direction: row;
gap: 1rem;
margin: 8px 0;
.badge {
display: flex;
flex-direction: row;
align-items: center;
width: initial;
gap: 8px;
padding: 4px 8px;
background: rgba(white, 0.1);
border-radius: 4px;
.dot {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fb636b;
}
}
}
}
}
.xpinfo {
display: flex;
flex-direction: row;
justify-content: space-between;
background: var(--black2);
color: #ababab;
padding: 0 14px;
}
.xpbar {
display: block;
width: 100%;
height: 10px;
background: rgba(white, 0.025);
.xpinner {
display: block;
height: 100%;
width: 99%;
background: #fb636b;
opacity: 75%;
}
}
footer {
min-height: 16px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
section {
width: 50%;
padding: 2rem;
@media screen and (max-width: 800px) {
width: 100%;
}
}
}
}

113
components/ProfileCard/ProfileCard.tsx Normal file
View File

@@ -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 };