From 641ff29d44070287b47a7322a8fbb65cd20eebbb Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Mon, 12 Dec 2022 12:09:02 +0100
Subject: [PATCH] primitive gallery on indexpage

---
 .../IndexGallery/IndexGallery.module.scss     | 55 +++++++++++++++++++
 components/IndexGallery/IndexGallery.tsx      | 32 +++++++++++
 data/gallery.json                             | 20 +++++++
 pages/index.tsx                               |  2 +
 4 files changed, 109 insertions(+)
 create mode 100644 components/IndexGallery/IndexGallery.module.scss
 create mode 100644 components/IndexGallery/IndexGallery.tsx
 create mode 100644 data/gallery.json

diff --git a/components/IndexGallery/IndexGallery.module.scss b/components/IndexGallery/IndexGallery.module.scss
new file mode 100644
index 0000000..02bde37
--- /dev/null
+++ b/components/IndexGallery/IndexGallery.module.scss
@@ -0,0 +1,55 @@
+.gallerycontainer {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	@media screen and (max-width: 800px) {
+		flex-direction: column;
+		align-items: center;
+	}
+	gap: 1.5rem;
+	.galleryimg {
+		position: relative;
+		@media screen and (max-width: 800px) {
+			text-decoration: none;
+		}
+		img {
+			max-height: 18rem;
+			border-radius: 8px;
+			@media screen and (max-width: 800px) {
+				max-width: 250px;
+			}
+		}
+		article {
+			position: absolute;
+			backdrop-filter: blur(8px);
+			background: rgba(#fff, 0.4);
+			color: var(--backdrop);
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: baseline;
+			justify-content: space-between;
+			padding: 0.25rem 0.5rem;
+			border-radius: 8px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			transition-duration: 100ms;
+			opacity: 0;
+			@media screen and (max-width: 800px) {
+				display: block;
+				position: unset;
+				background: unset;
+				color: var(--white0);
+				padding: 0;
+				opacity: 1;
+			}
+		}
+		&:hover {
+			article {
+				opacity: 1;
+			}
+		}
+	}
+}
diff --git a/components/IndexGallery/IndexGallery.tsx b/components/IndexGallery/IndexGallery.tsx
new file mode 100644
index 0000000..9814751
--- /dev/null
+++ b/components/IndexGallery/IndexGallery.tsx
@@ -0,0 +1,32 @@
+import styles from "./IndexGallery.module.scss";
+import gallery from "../../data/gallery.json";
+import Link from "next/link";
+
+const IndexGallery = () => {
+	return (
+		<>
+			<main>
+				<h2>galeria zdjęć idących mocno</h2>
+			</main>
+			<main className={styles.gallerycontainer}>
+				{gallery.map((entry) => {
+					return (
+						<Link
+							key={entry.link}
+							href={entry.link}
+							className={styles.galleryimg}
+						>
+							<img src={entry.link} alt={entry.description} />
+							<article>
+								<h3>{entry.title}</h3>
+								<p>{entry.meta}</p>
+							</article>
+						</Link>
+					);
+				})}
+			</main>
+		</>
+	);
+};
+
+export { IndexGallery };
diff --git a/data/gallery.json b/data/gallery.json
new file mode 100644
index 0000000..9b07a0d
--- /dev/null
+++ b/data/gallery.json
@@ -0,0 +1,20 @@
+[
+	{
+		"title": "RemCon 2022",
+		"description": "Bavil, Dzioba, Mollin i BeElephant pozują nad morzem.",
+		"meta": "Gdynia, 25.02.2022",
+		"link": "https://media.discordapp.net/attachments/719165033090908190/946703702864060466/20220225_104137.jpg"
+	},
+	{
+		"title": "Mollin Stream II",
+		"description": "BeElephant i Mollin w kompromitujących przebraniach.",
+		"meta": "Poznań, 02.12.2022",
+		"link": "https://media.discordapp.net/attachments/719166032714924045/1048341477329227847/image.png"
+	},
+	{
+		"title": "Morasko Chill",
+		"description": "Album cover dla nieistniejącej płyty, featuring BeElephant, J4roid, Mollin i MrMichal564.",
+		"meta": "Poznań, 11.2022",
+		"link": "https://media.discordapp.net/attachments/719165033090908190/1043955363327783042/Pamiec_wody_o_jabku.jpg"
+	}
+]
diff --git a/pages/index.tsx b/pages/index.tsx
index b0e2eeb..0c1ca62 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,6 +4,7 @@ import { SEO } from "../components/SEO";
 import { Icon, IconSet } from "../components/Icon";
 import splashes from "../data/splashes.json";
 import Link from "next/link";
+import { IndexGallery } from "../components/IndexGallery/IndexGallery";
 
 const PageIndex = () => {
 	const [splash, setSplash] = useState("");
@@ -64,6 +65,7 @@ const PageIndex = () => {
 					github <Icon icon={IconSet.GitHub} />
 				</Link>
 			</main>
+			<IndexGallery />
 		</>
 	);
 };