Merge pull request #15 from gractwo/lyle

lyle branch merge

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 (

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",

pages/o-gractwie.tsx

@@ -8,26 +8,32 @@ import links from "../data/links.json";
 import { useEffect, useState } from "react";
 
 const PageInfo = () => {
-	const [adminList, setAdminList] = useState([]);
+	const [personsList, setPersonsList] = useState([]);
+	const [funFact, setFunFact] = useState("");
 	type apiResType = {
 		Id: string;
 		Name: string;
-		Desc: string;
+		Desc?: string;
-		Img: string;
+		Img?: string;
-		DevBadge: string;
+		IsAdmin?: boolean;
-		AssignedUser: string;
+		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) => {
 				return res.json();
 			})
 			.then((data) => {
-				setAdminList(data);
+				setPersonsList(data);
 			})
 			.catch((err) => {
 				console.log(err);
 			});
+		getFunFact();
 	}, []);
 	return (
 		<>
@@ -64,37 +70,92 @@ 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">
+				<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) => {
+					{personsList
-						return (
+						.filter((el: apiResType) => {
-							<Link
+							return !el.IsAdmin;
-								key={el.Id}
+						})
-								href={`/profil/${el.Name.replaceAll(
+						.map((el: apiResType) => {
-									" ",
+							return (
-									"-"
+								<Link
-								).toLocaleLowerCase()}`}
+									key={el.Id}
-							>
+									href={`/profil/${el.Name.replaceAll(
-								<article>
+										" ",
-									<img src={el.Img} alt={`zdjęcie profilowe ${el.Name}`} />
+										"-"
-									<div>
+									).toLocaleLowerCase()}`}
-										<h3>{el.Name}</h3>
+								>
-										<p>{el.Desc || "brak opisu."}</p>
+									<article>
-										{el.DevBadge ? (
+										<img src={el.Img} alt={`zdjęcie profilowe ${el.Name}`} />
-											<span className={styles.devBadge}>DEV</span>
+										<div>
-										) : (
+											<h3>{el.Name}</h3>
-											""
+											<p>{el.Desc || "brak opisu."}</p>
-										)}
+											{el.DevBadge ? (
-									</div>
+												<span className={styles.devBadge}>DEV</span>
-								</article>
+											) : (
-							</Link>
+												""
-						);
+											)}
-					})}
+										</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">
@@ -110,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> */}
 		</>
 	);
 };

styles/globals.scss

@@ -39,6 +39,28 @@ main {
 	margin: 0 auto;
 	padding: 1rem;
 }
+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;

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 {
@@ -105,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;
+		}
+	}
+}