day one

2022-12-10 23:58:09 +01:00
parent 29da22d579
commit acda284da1
25 changed files with 799 additions and 111 deletions
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,9 @@
+const Footer = () => {
+	return (
+		<div style={{ textAlign: "center" }}>
+			<p>&copy; Gractwo 2020-{new Date().getFullYear()}</p>
+		</div>
+	);
+};
+
+export default Footer;
--- a/components/Navigation/Navigation.module.scss
+++ b/components/Navigation/Navigation.module.scss
@@ -0,0 +1,36 @@
+.nav {
+	display: flex;
+	background-color: var(--black1);
+	min-height: 4rem;
+}
+.link {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	color: inherit;
+	text-decoration: none;
+	padding: 0 2rem;
+	height: auto;
+	user-select: none;
+	&:hover {
+		background: var(--backdrop);
+		color: var(--color);
+	}
+}
+.profile {
+	margin-left: auto;
+	background: var(--color);
+	color: var(--backdrop);
+}
+.logo {
+	padding: 0 1rem;
+	transition-duration: 100ms;
+	user-select: none;
+	&:hover {
+		background: var(--backdrop);
+		cursor: pointer;
+	}
+	&:active {
+		transform: scale(1.1);
+	}
+}
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -0,0 +1,43 @@
+import styles from "./Navigation.module.scss";
+import GractwoLogo from "../logo";
+import Link from "next/link";
+
+const PageNavigation = () => {
+	let username: string = "";
+	return (
+		<>
+			<div className={styles.nav}>
+				<GractwoLogo className={styles.logo} />
+				{/* <h1 className={styles.wordmark}>Gractwo!</h1> */}
+				<Link href="/" className={styles.link}>
+					główna
+				</Link>
+				<Link href="/o-gractwie" className={styles.link}>
+					o gractwie
+				</Link>
+				<Link href="/cytaty" className={styles.link}>
+					cytaty
+				</Link>
+				<Link href="/rankingi" className={styles.link}>
+					rankingi
+				</Link>
+				<Link
+					href="/"
+					style={{ display: "flex" }}
+					className={`${styles.link} ${styles.profile}`}
+				>
+					zaloguj się
+				</Link>
+				<Link
+					href="/"
+					style={{ display: "none" }}
+					className={`${styles.link} ${styles.profile}`}
+				>
+					{username ? username : "twój profil"}
+				</Link>
+			</div>
+		</>
+	);
+};
+
+export default PageNavigation;
--- a/components/SEO.tsx
+++ b/components/SEO.tsx
@@ -0,0 +1,22 @@
+import Head from "next/head";
+
+type seoprops = {
+	title?: string;
+	noatsign?: boolean; // simply add "noatsign" as property to element
+	description?: string;
+};
+
+const ComponentSEO = ({ title, noatsign, description }: seoprops) => {
+	const defaultDescription = "Witryna internetowa Gractwa.";
+	return (
+		<Head>
+			<title>
+				{title ? `${title}${noatsign ? "" : " @ gractwo.pl"}` : "gractwo.pl"}
+			</title>
+			<link rel="shortcut icon" href="/logo.svg" type="image/x-icon" />
+			<meta name="description" content={description || defaultDescription} />
+		</Head>
+	);
+};
+
+export default ComponentSEO;
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -0,0 +1,56 @@
+import { SVGProps } from "react";
+
+type logoprops = {
+	width?: number;
+	height?: number;
+} & React.SVGProps<SVGSVGElement>;
+
+const GractwoLogo = ({ width, height, ...props }: logoprops) => {
+	return (
+		<svg
+			version="1.2"
+			baseProfile="tiny"
+			id="svg10"
+			x="0px"
+			y="0px"
+			viewBox="0 0 192 192"
+			width={width || 64}
+			height={height || 64}
+			{...props}
+		>
+			<title id="title931">Gractwo Main Logo</title>
+			<path id="path48" fill="none" stroke="#61F2EA" d="M0,0" />
+			<path
+				id="path879"
+				fill="#FB636B"
+				stroke="#FB636B"
+				strokeWidth="0.513"
+				d="M29,146.3l-6-2.6l-0.1-0.5c0-0.3-0.4-6.5-0.9-13.7
+				l-0.8-13.2l9-29.7c5-16.3,9-29.8,9.1-29.9c0.1-0.1,1-1.3,2.1-2.7l2-2.4h3.1c1.7,0,5.3,0,8.1,0.1l4.9,0.1l1.2,1.4
+				c0.9,1.1,1.2,1.4,1.5,1.4c0.2,0,5.3,0.1,11.4,0.2l11,0.1l1.4-0.9c1.3-0.8,1.5-0.9,2-0.9c0.4,0,7,0.4,7.1,0.4c0,0,1.6,6.9,3.5,15.4
+				l3.5,15.4l-4.7,16.3l-4.7,16.3l-11.8,2.9l-11.8,2.9l-11.3,11.2l-11.3,11.2l-5.5,1.9c-3,1.1-5.6,2-5.7,2C35,148.9,32.9,148,29,146.3z
+					M39.2,142c3.6-1.1,3.6-1.1,4.1-1.6c0.2-0.3,5.1-5.3,10.7-11.2c8.7-9,10.4-10.7,10.7-10.8c0.2-0.1,5.4-1.4,11.4-3
+				c6-1.6,11-2.9,11-2.9c0,0,1.5-5.6,3.3-12.3c2.7-10.3,3.2-12.3,3.1-12.5c-0.1-0.1-1.6-2-3.3-4.3l-3.2-4l-0.7,0.1
+				c-0.4,0-3.2,0.3-6.3,0.5s-5.6,0.5-5.7,0.5c0,0-1.1,2.1-2.2,4.7l-2.2,4.6L67.7,92c-1.3,1.2-2.7,2.5-3,2.9L64,95.5l-4.1,0.8L55.8,97
+				l-4.2-0.7l-4.2-0.7L41.8,92c-3.1-2-5.6-3.6-5.6-3.7c0,0-2.1,6-4.6,13.3L27.1,115l0.2,12.9c0.1,7.1,0.2,12.9,0.3,12.9
+				c0.4,0.2,7.7,2.4,7.9,2.4C35.5,143.2,37.2,142.6,39.2,142L39.2,142z"
+			/>
+			<path
+				id="path929"
+				fill="#61F2EA"
+				stroke="#61F2EA"
+				strokeWidth="0.36"
+				d="M157.9,136.2l-3.9-1.8l-7.5-6.9
+				c-5.2-4.8-7.6-6.9-7.9-6.9c-0.2,0-8,0.4-17.3,1l-16.9,0.9l-3.4-2.7c-2.3-1.8-3.4-2.7-3.4-2.9c0-0.1,2.2-5.6,4.9-12.1l4.8-11.8
+				l-1.6-14.2l-1.6-14.2l2-3.7c1.1-2.1,2-3.8,2-3.8c0,0,5.4-0.3,12.1-0.7l12.1-0.6l5-3.4l5-3.4h5.5h5.5l7.6,10.1l7.6,10.1l0.3,7.3
+				L169,84l2.8,6.3l2.8,6.3l0.8,11.3c0.4,6.2,0.8,11.5,0.8,11.8c0,0.3-1.1,3.9-2.4,8l-2.4,7.4l-4.8,1.4l-4.8,1.4L157.9,136.2z
+					M164.3,132.1c1.1-0.5,2.1-0.9,2.1-0.9c0,0,0.9-2.6,1.9-5.7l1.8-5.7l-1.3-11.4c-0.7-6.3-1.3-11.5-1.3-11.6c0-0.1-1-1.5-2.2-3.2
+				c-1.5-2.2-2.2-3-2.4-3c-0.1,0-1.4,0.4-2.7,0.8l-2.5,0.8l-2.5-0.2l-2.5-0.2l-3.5-1.9c-3.1-1.7-3.9-2.2-6.4-4.2
+				c-1.6-1.3-3-2.3-3.1-2.3s-4,0.2-8.6,0.5l-8.3,0.5l-2.2,2.1c-1.2,1.2-3.3,3.2-4.6,4.4l-2.4,2.3l-1.3,11.6c-0.7,6.4-1.3,11.6-1.3,11.6
+				c0.1,0.1,27.2-0.9,29.3-1l1.2-0.1l8,7.9l8,7.9l2,0.9c1.1,0.5,2.1,0.9,2.3,0.9C162.1,133,163.1,132.6,164.3,132.1L164.3,132.1z"
+			/>
+		</svg>
+	);
+};
+
+export default GractwoLogo;