From c6ae6cdfa9a5d623c603561c1d2d75f2671664d5 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Wed, 21 Dec 2022 21:29:56 +0100
Subject: [PATCH] adjust /o-gractwie styling, add 1st profpage, add keys to
 generated items

---
 data/administracja.json      |  3 ++-
 pages/o-gractwie.tsx         | 24 +++++++++++++++---------
 pages/profile/jamesen.tsx    |  5 +++++
 styles/oGractwie.module.scss |  8 +++++++-
 4 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 pages/profile/jamesen.tsx

diff --git a/data/administracja.json b/data/administracja.json
index 50ccfcb..81abdfa 100644
--- a/data/administracja.json
+++ b/data/administracja.json
@@ -2,7 +2,8 @@
 	{
 		"name": "jamesen",
 		"desc": "Frontendowiec nie jebany.",
-		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg"
+		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg",
+		"profilehref": "jamesen"
 	},
 	{
 		"name": "Mollin",
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx
index e485db5..cf524cd 100644
--- a/pages/o-gractwie.tsx
+++ b/pages/o-gractwie.tsx
@@ -22,8 +22,9 @@ const PageInfo = () => {
 							Gractwo jest nieformalną organizacją i społecznością osób
 							zainteresowanych grami, anime, popkulturą. Powstałe w 2020 roku
 							jest zreszeniem ludzi w dużej mierze znających się nawzajem i
-							spędzających razem „na Gractwie” czas. Genezą nazwy jest złączenie
-							słów „Gracz” i „Bractwo”.
+							spędzających razem „na Gractwie” czas.
+							{/* Genezą nazwy jest złączenie słów „Gracz” i „Bractwo”. */}
+							{/*  */}
 							{/* discordowa społeczność kryptogenshinowa która jest yyy często
 							charakteryzuje się łączeniem przez relacje interpersonalne
 							kluczowych członków, chyba że jeszcze bardziej chcemy ukrywać
@@ -48,13 +49,18 @@ const PageInfo = () => {
 				<div className={styles.persons}>
 					{administracja.map((el) => {
 						return (
-							<article>
-								<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />
-								<div>
-									<h3>{el.name}</h3>
-									<p>{el.desc || "brak opisu."}</p>
-								</div>
-							</article>
+							<Link
+								key={el.name}
+								href={el.profilehref ? `/profile/${el.profilehref}` : ""}
+							>
+								<article>
+									<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />
+									<div>
+										<h3>{el.name}</h3>
+										<p>{el.desc || "brak opisu."}</p>
+									</div>
+								</article>
+							</Link>
 						);
 					})}
 				</div>
diff --git a/pages/profile/jamesen.tsx b/pages/profile/jamesen.tsx
new file mode 100644
index 0000000..a43d3b9
--- /dev/null
+++ b/pages/profile/jamesen.tsx
@@ -0,0 +1,5 @@
+const ProfileJamesen = () => {
+	return <main>Hello, this is jamesen's profile page!!</main>;
+};
+
+export default ProfileJamesen;
diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss
index 101b0cc..076392a 100644
--- a/styles/oGractwie.module.scss
+++ b/styles/oGractwie.module.scss
@@ -44,8 +44,13 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	justify-content: center;
 	margin-top: 1rem;
-	gap: 1rem;
+	gap: 1.5rem;
+	a {
+		color: inherit;
+		text-decoration: inherit;
+	}
 	article {
 		--radius: 6px;
 		flex: 1;
@@ -53,6 +58,7 @@
 		flex-direction: row;
 		background: var(--black1);
 		border-radius: var(--radius);
+		box-shadow: var(--shadow0);
 		img {
 			width: 128px;
 			max-width: 156px;