From f39e63cf6b95829f7446884b750e76e1303a6a31 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Tue, 27 Dec 2022 20:13:56 +0100
Subject: [PATCH 1/2] geneza gractwa & api persons of note preparation

---
 data/links.json              |   4 ++
 pages/o-gractwie.tsx         | 112 +++++++++++++++++++++++++----------
 styles/globals.scss          |   3 +
 styles/oGractwie.module.scss |   4 +-
 4 files changed, 92 insertions(+), 31 deletions(-)

diff --git a/data/links.json b/data/links.json
index 3739a8f..65906fb 100644
--- a/data/links.json
+++ b/data/links.json
@@ -31,6 +31,10 @@
 		"href": "/o-gractwie#sklad-administracji",
 		"hrefalias": ["/profil"]
 	},
+	{
+		"href": "https://youtu.be/NNv2RHR62Rs",
+		"hrefalias": ["/pgtf-theme"]
+	},
 	{
 		"name": "Kod Źródłowy",
 		"href": "https://github.com/gractwo/gractwo-web",
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx
index 55dde0f..1d16178 100644
--- a/pages/o-gractwie.tsx
+++ b/pages/o-gractwie.tsx
@@ -8,14 +8,15 @@ import links from "../data/links.json";
 import { useEffect, useState } from "react";
 
 const PageInfo = () => {
-	const [adminList, setAdminList] = useState([]);
+	const [personsList, setPersonsList] = useState([]);
 	type apiResType = {
 		Id: string;
 		Name: string;
-		Desc: string;
-		Img: string;
-		DevBadge: string;
-		AssignedUser: string;
+		Desc?: string;
+		Img?: string;
+		IsAdmin?: boolean;
+		DevBadge?: boolean;
+		AssignedUser?: string;
 	};
 	useEffect(() => {
 		fetch("https://gractwo.pl/api/v1/admincards")
@@ -23,7 +24,7 @@ const PageInfo = () => {
 				return res.json();
 			})
 			.then((data) => {
-				setAdminList(data);
+				setPersonsList(data);
 			})
 			.catch((err) => {
 				console.log(err);
@@ -66,35 +67,86 @@ const PageInfo = () => {
 					</Link>
 				</div>
 			</main>
+			<main id="geneza-gractwa">
+				<h2>geneza gractwa</h2>
+				<p style={{ textAlign: "justify" }}>
+					Gractwo zostało założone w 2020 roku w odpowiedzi na{" "}
+					<Link href="/pgtf-theme">rozłam / przewrót władzy w PGTF</Link>
+					{". "}Serwer discordowy PGTF, pozostający nadal pod kontrolą naszej
+					administracji został przeniesiony w stan przejściowy do czasu podjęcia
+					decyzji o powstaniu Gractwa. W pierwszych dniach została utworzona
+					grupa facebookowa i strona internetowa. Aktywność na grupie
+					facebookowej nigdy nie rozwinęła się wystarczająco by przekształcić
+					się w pełnoprawną społeczność, ale serwer discord cały czas
+					funkcjonuje jako nasze małe, ciasne ale własne miejsce spotkań.
+				</p>
+			</main>
 			<main id="sklad-administracji">
 				<h2>skład administracji</h2>
 				<div className={styles.persons}>
-					{adminList.map((el: apiResType) => {
-						return (
-							<Link
-								key={el.Id}
-								href={`/profil/${el.Name.replaceAll(
-									" ",
-									"-"
-								).toLocaleLowerCase()}`}
-							>
-								<article>
-									<img src={el.Img} alt={`zdjęcie profilowe ${el.Name}`} />
-									<div>
-										<h3>{el.Name}</h3>
-										<p>{el.Desc || "brak opisu."}</p>
-										{el.DevBadge ? (
-											<span className={styles.devBadge}>DEV</span>
-										) : (
-											""
-										)}
-									</div>
-								</article>
-							</Link>
-						);
-					})}
+					{personsList
+						.filter((el: apiResType) => {
+							return !el.IsAdmin;
+						})
+						.map((el: apiResType) => {
+							return (
+								<Link
+									key={el.Id}
+									href={`/profil/${el.Name.replaceAll(
+										" ",
+										"-"
+									).toLocaleLowerCase()}`}
+								>
+									<article>
+										<img src={el.Img} alt={`zdjęcie profilowe ${el.Name}`} />
+										<div>
+											<h3>{el.Name}</h3>
+											<p>{el.Desc || "brak opisu."}</p>
+											{el.DevBadge ? (
+												<span className={styles.devBadge}>DEV</span>
+											) : (
+												""
+											)}
+										</div>
+									</article>
+								</Link>
+							);
+						})}
 				</div>
 			</main>
+			{/* <main id="osoby-godne-uwagi">
+				<h2>osoby godne uwagi</h2>
+				<div className={styles.persons}>
+					{personsList
+						.filter((el: apiResType) => {
+							return !el.IsAdmin;
+						})
+						.map((el: apiResType) => {
+							return (
+								<Link
+									key={el.Id}
+									href={`/profil/${el.Name.replaceAll(
+										" ",
+										"-"
+									).toLocaleLowerCase()}`}
+								>
+									<article>
+										<img src={el.Img} alt={`zdjęcia profilowe ${el.Name}`} />
+										<div>
+											<h3>{el.Name}</h3>
+											<p>{el.Desc || "brak opisu."}</p>
+											{el.DevBadge ? (
+												<span className={styles.devBadge}>DEV</span>
+											) : (
+												""
+											)}
+										</div>
+									</article>
+								</Link>
+							);
+						})}
+				</div>
+			</main> */}
 			<main id="linki">
 				<h2>linki i przekierowania</h2>
 				<div className="chips">
diff --git a/styles/globals.scss b/styles/globals.scss
index bfaa49b..37d1a5b 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -39,6 +39,9 @@ main {
 	margin: 0 auto;
 	padding: 1rem;
 }
+a {
+	color: rgb(251, 99, 107);
+}
 
 .chips {
 	display: flex;
diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss
index 6d9e974..3930004 100644
--- a/styles/oGractwie.module.scss
+++ b/styles/oGractwie.module.scss
@@ -44,7 +44,9 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: center;
+	@media screen and (max-width: 800px) {
+		justify-content: center;
+	}
 	margin-top: 1rem;
 	gap: 1.5rem;
 	a {

From 2cce453d303fefc3a5d955059a32611e49c4b9a2 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Tue, 27 Dec 2022 20:55:18 +0100
Subject: [PATCH 2/2] ciekawostki preparations

---
 components/Icon.tsx          | 21 +++++++++++++++++++++
 pages/o-gractwie.tsx         | 20 ++++++++++++++++++++
 styles/globals.scss          | 19 +++++++++++++++++++
 styles/oGractwie.module.scss | 19 +++++++++++++++++++
 4 files changed, 79 insertions(+)

diff --git a/components/Icon.tsx b/components/Icon.tsx
index 72aebfc..b846de7 100644
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@@ -4,6 +4,7 @@ type iconselection =
 	| "Link2"
 	| "ExternalLink"
 	| "Code"
+	| "Info"
 	| "Twitter"
 	| "GitHub"
 	| "YouTube"
@@ -120,6 +121,26 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<polyline points="8 6 2 12 8 18" />
 				</svg>
 			);
+		case "Info":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-info"
+					{...props}
+				>
+					<circle cx="12" cy="12" r="10" />
+					<line x1="12" y1="16" x2="12" y2="12" />
+					<line x1="12" y1="8" x2="12.01" y2="8" />
+				</svg>
+			);
 		case "Twitter":
 			// twitter icon courtesy of simpleicons.org
 			return (
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx
index 1d16178..8dbe62d 100644
--- a/pages/o-gractwie.tsx
+++ b/pages/o-gractwie.tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 
 const PageInfo = () => {
 	const [personsList, setPersonsList] = useState([]);
+	const [funFact, setFunFact] = useState("");
 	type apiResType = {
 		Id: string;
 		Name: string;
@@ -18,6 +19,9 @@ const PageInfo = () => {
 		DevBadge?: boolean;
 		AssignedUser?: string;
 	};
+	function getFunFact(): void {
+		setFunFact("Genezą nazwy Gractwa jest złączenie słów „Gracz” i „Bractwo”.");
+	}
 	useEffect(() => {
 		fetch("https://gractwo.pl/api/v1/admincards")
 			.then((res) => {
@@ -29,6 +33,7 @@ const PageInfo = () => {
 			.catch((err) => {
 				console.log(err);
 			});
+		getFunFact();
 	}, []);
 	return (
 		<>
@@ -65,6 +70,10 @@ const PageInfo = () => {
 						linki i przekierowania
 						<Icon icon="Link2" />
 					</Link>
+					{/* <Link href="#ciekawostka" className="chip">
+						ciekawostki
+						<Icon icon="Info" />
+					</Link> */}
 				</div>
 			</main>
 			<main id="geneza-gractwa">
@@ -162,6 +171,17 @@ const PageInfo = () => {
 					})}
 				</div>
 			</main>
+			{/* <main id="ciekawostka">
+				<h2>ciekawostka</h2>
+				<div className={styles.funfact}>
+					<p>
+						<span>{"„"}</span>
+						{funFact}
+						<span>{"”"}</span>
+					</p>
+					<button onClick={getFunFact}>Odśwież ciekawostkę.</button>
+				</div>
+			</main> */}
 		</>
 	);
 };
diff --git a/styles/globals.scss b/styles/globals.scss
index 37d1a5b..cbf0b7d 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -42,6 +42,25 @@ main {
 a {
 	color: rgb(251, 99, 107);
 }
+button {
+	display: inline-block;
+	font-size: 1rem;
+	padding: 8px;
+	margin: 0 8px;
+	background: none;
+	border: 1px solid var(--grey);
+	// background: rgba(grey, 0.45);
+	border-radius: 4px;
+	color: var(--color);
+	font-family: var(--fonts-bold);
+	cursor: pointer;
+	transition-duration: 100ms;
+	&:hover {
+		background: rgba(grey, 0.25);
+		box-shadow: var(--shadow0);
+		// color: black;
+	}
+}
 
 .chips {
 	display: flex;
diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss
index 3930004..1b8dbbb 100644
--- a/styles/oGractwie.module.scss
+++ b/styles/oGractwie.module.scss
@@ -107,3 +107,22 @@
 		}
 	}
 }
+.funfact {
+	display: block;
+	text-align: right;
+	width: 100%;
+	background: var(--black1);
+	padding: 16px 0;
+	margin: 16px 0;
+	border-radius: 8px;
+	box-shadow: var(--shadow0);
+	p {
+		text-align: center;
+		margin-bottom: 12px;
+		span {
+			font-family: var(--fonts-bold);
+			font-size: 1.5em;
+			margin: 0 16px;
+		}
+	}
+}