ciekawostki preparations

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 (

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> */}
 		</>
 	);
 };

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;

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;
+		}
+	}
+}