Merge pull request #3 from gractwo/bluemeth

/o-gractwo & /profile/[id]

pages/index.tsx

@@ -1,7 +1,7 @@
 import styles from "../styles/Index.module.scss";
 import { useEffect, useState } from "react";
 import { SEO } from "../components/SEO";
-import { Icon, IconSet } from "../components/Icon";
+import { Icon } from "../components/Icon";
 import splashes from "../data/splashes.json";
 import Link from "next/link";
 import { IndexGallery } from "../components/IndexGallery/IndexGallery";
@@ -21,7 +21,6 @@ const PageIndex = () => {
 				return res.text();
 			})
 			.then((data) => {
-				console.log(data);
 				setMemberCount(data);
 			})
 			.catch((err) => {
@@ -41,8 +40,6 @@ const PageIndex = () => {
 						„{splash || "..."}”
 					</h1>
 					<p>{welcometext}</p>
-					<br />
-					<p>Warto naznaczyć, że strona jest w trakcie remontu.</p>
 				</div>
 			</div>
 			<div className={styles.statscontainer}>
@@ -65,18 +62,18 @@ const PageIndex = () => {
 					</article>
 				</main>
 			</div>
-			<main className={styles.chips}>
-				<Link href="/discord" className={styles.chip}>
-					discord <Icon icon={IconSet.Discord} />
+			<main className="chips">
+				<Link href="/discord" className="chip">
+					discord <Icon icon="Discord" />
 				</Link>
-				<Link href="/youtube" className={styles.chip}>
-					youtube <Icon icon={IconSet.YouTube} />
+				<Link href="/youtube" className="chip">
+					youtube <Icon icon="YouTube" />
 				</Link>
-				<Link href="/twitter" className={styles.chip}>
-					twitter <Icon icon={IconSet.Twitter} />
+				<Link href="/twitter" className="chip">
+					twitter <Icon icon="Twitter" />
 				</Link>
-				<Link href="/github" className={styles.chip}>
-					github <Icon icon={IconSet.GitHub} />
+				<Link href="/github" className="chip">
+					github <Icon icon="GitHub" />
 				</Link>
 			</main>
 			<IndexGallery />

pages/o-gractwie.tsx

@@ -1,10 +1,93 @@
+import { GractwoLogo } from "../components/Logo";
 import { SEO } from "../components/SEO";
+import styles from "../styles/oGractwie.module.scss";
+import Link from "next/link";
+import { Icon } from "../components/Icon";
+import { iconselection } from "../components/Icon";
+import administracja from "../data/administracja.json";
+import links from "../data/links.json";
 
 const PageInfo = () => {
 	return (
 		<>
 			<SEO title="o gractwie" />
-			<main>Miejsce na stronkę od informacji nt. Gractwa.</main>
+			<main>
+				<div className={styles.biglogocontainer}>
+					<GractwoLogo />
+					<article>
+						<h1>
+							<GractwoLogo />
+							Gractwo
+						</h1>
+						<p style={{ textAlign: "justify" }}>
+							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”. */}
+							{/*  */}
+							{/* 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ć
+							naszą kryptogenshinowość */}
+							{/* THANKS, MOLLIN */}
+						</p>
+					</article>
+				</div>
+				<div className="chips">
+					<Link href="#sklad-administracji" className="chip">
+						skład administracji
+						<Icon icon="Users" />
+					</Link>
+					<Link href="#linki" className="chip">
+						linki i przekierowania
+						<Icon icon="Link2" />
+					</Link>
+				</div>
+			</main>
+			<main id="sklad-administracji">
+				<h2>skład administracji</h2>
+				<div className={styles.persons}>
+					{administracja.map((el) => {
+						return (
+							<Link
+								key={el.name}
+								href={`/profile/${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="linki">
+				<h2>linki i przekierowania</h2>
+				<div className="chips">
+					{links.map((el) => {
+						if (el.name) {
+							return (
+								<Link className="chip" key={el.name} href={el.href}>
+									{el.name}
+									{el.icon ? <Icon icon={el.icon as iconselection} /> : ""}
+								</Link>
+							);
+						}
+					})}
+				</div>
+			</main>
 		</>
 	);
 };

pages/profile/[profname]/index.tsx

@@ -0,0 +1,72 @@
+import { useRouter } from "next/router";
+import administracja from "../../../data/administracja.json";
+
+const ProfilePage = () => {
+	const router = useRouter();
+	const profname = router.query.profname as string;
+	if (
+		administracja
+			.map((el) => {
+				return el.name.replaceAll(" ", "-").toLocaleLowerCase();
+			})
+			.includes(profname)
+	) {
+		const person = administracja.filter((wpis) => {
+			return wpis.name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
+		})[0];
+		return (
+			<main>
+				<div
+					style={{
+						display: "flex",
+						flexDirection: "row",
+						alignItems: "center",
+						gap: "1rem",
+						marginBottom: "1rem",
+					}}
+				>
+					<img
+						src={person.img}
+						alt={`${person.name} profile image`}
+						style={{
+							width: "128px",
+							aspectRatio: "1/1",
+							objectFit: "cover",
+							borderRadius: "50%",
+						}}
+					/>
+					<div>
+						<h1>{person.name}</h1>
+						<p>{person.desc}</p>
+					</div>
+				</div>
+				{person.profile?.bigdesc.map((el, index) => {
+					return <p key={index}>{el || <br />}</p>;
+				})}
+			</main>
+		);
+	} else {
+		return (
+			<main>
+				<h1>Sorki!{" :("}</h1>
+				<p style={{ lineHeight: "30px" }}>
+					Sprawdź pisownię:
+					<span
+						style={{
+							background: "var(--black1)",
+							boxShadow: "var(--shadow0)",
+							padding: "8px",
+							margin: "10px",
+							borderRadius: "4px",
+						}}
+					>
+						{`/profile/${profname}`}
+					</span>
+					nie jest poprawnym lokatorem profilu.
+				</p>
+			</main>
+		);
+	}
+};
+
+export default ProfilePage;