profilecard on profilepages, settings page init & more

components/ProfileCard/ProfileCard.module.scss

@@ -18,6 +18,9 @@
 			border-radius: 50%;
 			height: 128px;
 			width: 128px;
+			aspect-ratio: 1 / 1;
+			object-fit: cover;
+			object-position: 50% 35%;
 			@media screen and (max-width: 600px) {
 				height: 64px;
 				width: 64px;

components/ProfileCard/ProfileCard.tsx

@@ -1,6 +1,7 @@
 import styles from "./ProfileCard.module.scss";
 
 type UserProfileCardProps = {
+	data: {
 		username: string;
 		description?: string;
 		picture?: string | null;
@@ -18,45 +19,46 @@ type UserProfileCardProps = {
 			badgeImage?: string;
 		}[];
 		accentColor?: string;
+	};
 };
 
-const ProfileCard = (user: UserProfileCardProps) => {
+const ProfileCard = ({ data }: UserProfileCardProps) => {
 	return (
 		<>
 			<div className={styles.profile}>
 				<article>
 					<img
-						src={user.picture || "https://placewaifu.com/image/128"}
+						src={data.picture || "https://placewaifu.com/image/128"}
-						alt={user.username}
+						alt={data.username}
 					/>
 					<div className={styles.inner}>
 						<header>
-							<h1>{user.username}</h1>
+							<h1>{data.username}</h1>
 							<p>
-								{user.experience?.level && (
+								{data.experience?.level && (
 									<>
 										{"LVL "}
-										<span>{user.experience.level}</span>
+										<span>{data.experience.level}</span>
 									</>
 								)}
 							</p>
 						</header>
-						<p>{user.description}</p>
+						<p>{data.description}</p>
 						<div className={styles.badges}>
-							{user.isAdmin && (
+							{data.isAdmin && (
 								<div className={styles.badge}>
 									<div
 										className={styles.dot}
-										style={{ background: user.accentColor }}
+										style={{ background: data.accentColor }}
 									/>
 									Admin
 								</div>
 							)}
-							{user.isDeveloper && (
+							{data.isDeveloper && (
 								<div className={styles.badge}>
 									<div
 										className={styles.dot}
-										style={{ background: user.accentColor }}
+										style={{ background: data.accentColor }}
 									/>
 									DEV
 								</div>
@@ -64,23 +66,23 @@ const ProfileCard = (user: UserProfileCardProps) => {
 						</div>
 					</div>
 				</article>
-				{user.experience?.looseXP && user.experience.tilNextLevel && (
+				{data.experience?.looseXP && data.experience.tilNextLevel && (
 					<div className={styles.xpinfo}>
-						<p>XP: {user.experience.looseXP}</p>
+						<p>XP: {data.experience.looseXP}</p>
-						<p>XP until next level: {user.experience.tilNextLevel} </p>
+						<p>XP until next level: {data.experience.tilNextLevel} </p>
 					</div>
 				)}
-				{user.experience?.looseXP && user.experience.tilNextLevel && (
+				{data.experience?.looseXP && data.experience.tilNextLevel && (
 					<div className={styles.xpbar}>
 						<div
 							className={styles.xpinner}
 							style={{
-								background: user.accentColor,
+								background: data.accentColor,
 								width:
 									(
-										(user.experience.looseXP /
+										(data.experience.looseXP /
-											(user.experience.looseXP +
+											(data.experience.looseXP +
-												user.experience.tilNextLevel)) *
+												data.experience.tilNextLevel)) *
 										100
 									).toString() + "%",
 							}}
@@ -88,7 +90,7 @@ const ProfileCard = (user: UserProfileCardProps) => {
 					</div>
 				)}
 				<footer>
-					{user.badges
+					{data.badges
 						?.slice(0, 1)
 						.map(
 							(el: {

pages/ja.tsx

@@ -1,77 +0,0 @@
-import { useUser } from "@auth0/nextjs-auth0/client";
-import { ProfileCard } from "../components/ProfileCard/ProfileCard";
-
-const PageMe = () => {
-	const { user, error, isLoading } = useUser();
-
-	return (
-		<>
-			{isLoading && (
-				<main>
-					<h3>Ładujemy dane dla Ciebie...</h3>
-					<p>Sit tight.</p>
-				</main>
-			)}
-			{error && (
-				<main>
-					<h3>Wystąpił błąd.</h3>
-					<p>Tyle wiemy:</p>
-					<p>{error.name}</p>
-					<p>{error.message}</p>
-				</main>
-			)}
-			{!isLoading && !error && user && (
-				<main>
-					<ProfileCard
-						username={user.name || "unknown user"}
-						picture={user.picture}
-						description={"To Ty! Niezaprzeczalnie. ヽ(*・ω・)ﾉ"}
-						experience={{ level: 69, looseXP: 420, tilNextLevel: 270 }}
-						badges={[
-							{
-								badgeName: "Odkrywca internetowy",
-								badgeDesc: "Zalogowałeś się na stronę internetową gractwa.",
-							},
-							{
-								badgeName: "Technik Informatyk",
-								badgeDesc: "Łapanki na korytarzu to normalka.",
-							},
-							{
-								badgeName: "Rozpad PGTF",
-								badgeDesc: "Służba w oddziałach Super Pizzy - powód do dumy.",
-							},
-							{
-								badgeName: "Mollin Stream",
-								badgeDesc: "„Sorry, ja za bardzo nie pamietam.” ~ Mollin",
-							},
-							{
-								badgeName: "Alkoholik",
-								badgeDesc: "pracoholicy gdy skończy im się pracohol:",
-							},
-							{
-								badgeName: "Studnia Oneshot",
-								badgeDesc: "elf w studni - ciekawe jak stamtąd wyjdzie",
-							},
-							{
-								badgeName: "RemCon 2022",
-								badgeDesc: "pomorze konwent",
-							},
-						]}
-						isAdmin
-						isDeveloper
-					/>
-				</main>
-			)}
-			{!isLoading && !user && (
-				<main>
-					<h1>/ja</h1>
-					<p>
-						Musisz być zalogowany aby skorzystać z funkcjonalności tej strony.
-					</p>
-				</main>
-			)}
-		</>
-	);
-};
-
-export default PageMe;

pages/ja/index.tsx

@@ -0,0 +1,92 @@
+import { useUser } from "@auth0/nextjs-auth0/client";
+import Link from "next/link";
+import { ProfileCard } from "../../components/ProfileCard/ProfileCard";
+import { SEO } from "../../components/SEO";
+
+const PageMe = () => {
+	const { user, error, isLoading } = useUser();
+
+	return (
+		<>
+			{isLoading && (
+				<main>
+					<h3>Ładujemy dane dla Ciebie...</h3>
+					<p>Sit tight.</p>
+				</main>
+			)}
+			{error && (
+				<main>
+					<h3>Wystąpił błąd.</h3>
+					<p>Tyle wiemy:</p>
+					<p>{error.name}</p>
+					<p>{error.message}</p>
+				</main>
+			)}
+			{!isLoading && !error && user && (
+				<main>
+					<SEO title="twój profil" />
+					<ProfileCard
+						data={{
+							username: user.name || "unknown user",
+							picture: user.picture,
+							description: "Twój opis. ヽ(*・ω・)ﾉ",
+							isAdmin: true,
+							isDeveloper: true,
+							experience: {
+								level: 69,
+								looseXP: 420,
+								tilNextLevel: 69,
+							},
+							badges: [
+								{
+									badgeName: "Odkrywca internetowy",
+									badgeDesc:
+										"Logowanie się na gractwo.pl nie jest takie straszne.",
+								},
+								{
+									badgeName: "Technik Informatyk",
+									badgeDesc: "Łapanki na korytarzu to normalka.",
+								},
+								{
+									badgeName: "Rozpad PGTF",
+									badgeDesc: "Służba w oddziałach Super Pizzy - powód do dumy.",
+								},
+								{
+									badgeName: "Mollin Stream",
+									badgeDesc: "„Sorry, ja za bardzo nie pamietam.” ~ Mollin",
+								},
+								{
+									badgeName: "Alkoholik",
+									badgeDesc: "pracoholicy gdy skończy im się pracohol:",
+								},
+								{
+									badgeName: "Studnia Oneshot",
+									badgeDesc: "elf w studni - ciekawe jak stamtąd wyjdzie",
+								},
+								{
+									badgeName: "RemCon 2022",
+									badgeDesc: "pomorze konwent",
+								},
+							],
+						}}
+					/>
+					<Link href="/ja/ustawienia">
+						<button style={{ width: "100%", margin: 0 }}>
+							Ustawienia Konta
+						</button>
+					</Link>
+				</main>
+			)}
+			{!isLoading && !user && (
+				<main>
+					<h1>/ja</h1>
+					<p>
+						Musisz być zalogowany aby skorzystać z funkcjonalności tej strony.
+					</p>
+				</main>
+			)}
+		</>
+	);
+};
+
+export default PageMe;

pages/ja/ustawienia.tsx

@@ -0,0 +1,42 @@
+import { useUser } from "@auth0/nextjs-auth0/client";
+import { SEO } from "../../components/SEO";
+import styles from "../../styles/ustawienia.module.scss";
+
+const PageMeSettings = () => {
+	const { user, error, isLoading } = useUser();
+
+	return (
+		<>
+			{isLoading && (
+				<>
+					<main>
+						<h3>Ładowanie danych...</h3>
+					</main>
+				</>
+			)}
+			{error && (
+				<main>
+					<h3>Wystąpił błąd.</h3>
+					<p>Tyle wiemy.</p>
+				</main>
+			)}
+			{!isLoading && !error && user && (
+				<>
+					<main>
+						<SEO title="ustawienia konta" />
+						<h1>ustawienia konta</h1>
+						<p>
+							Kolor akcentowy <input type="color" name="" id="" />
+						</p>
+					</main>
+					<main>
+						<h3>uwaga: strona w trakcie budowy. funkcjonalność niegotowa.</h3>
+						<button>Zapisz zmiany</button>
+					</main>
+				</>
+			)}
+		</>
+	);
+};
+
+export default PageMeSettings;

pages/profil/[profname]/index.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { ProfileCard } from "../../../components/ProfileCard/ProfileCard";
 import { SEO } from "../../../components/SEO";
 
 const ProfilePage = () => {
@@ -43,15 +44,17 @@ const ProfilePage = () => {
 				return wpis.Name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
 			})[0];
 			return (
-				<main>
+				<>
 					<SEO title={person.Name} />
+					<main>
 						<div
 							style={{
 								display: "flex",
 								flexDirection: "row",
+								justifyContent: "center",
 								alignItems: "center",
 								gap: "1rem",
-							marginBottom: "1rem",
+								margin: "2rem 0 0 0",
 							}}
 						>
 							<img
@@ -74,6 +77,31 @@ const ProfilePage = () => {
 						return <p key={index}>{el || <br />}</p>;
 					})} */}
 					</main>
+					<main>
+						<ProfileCard
+							data={{
+								username: person.Name,
+								picture: person.Img,
+								description: "Twój opis. ヽ(*・ω・)ﾉ",
+								// accentColor: "violet",
+								isAdmin: person.IsAdmin,
+								isDeveloper: person.DevBadge,
+								experience: {
+									level: 69,
+									looseXP: 420,
+									tilNextLevel: 69,
+								},
+								badges: [
+									{
+										badgeName: "Odkrywca internetowy",
+										badgeDesc:
+											"Logowanie się na gractwo.pl nie jest takie straszne.",
+									},
+								],
+							}}
+						/>
+					</main>
+				</>
 			);
 		} else {
 			return (

styles/globals.scss

@@ -62,6 +62,17 @@ button {
 		// color: black;
 	}
 }
+input {
+	display: inline-block;
+	font-size: 1rem;
+	padding: 4px;
+	border-radius: 3px;
+	background: rgba(white, 0.1);
+	border: 0;
+	color: white;
+	outline: none;
+	font-family: var(--fonts-norm);
+}
 
 .chips {
 	display: flex;

styles/ustawienia.module.scss

@@ -0,0 +1,10 @@
+.inputSectionParent {
+	display: flex;
+	flex-direction: column;
+}
+.inputSection {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	align-items: baseline;
+}