Merge pull request #33 from gractwo/1-develop-a-masonry-grid-for-the-index-pages-gallery

infamous Griddy

components/IndexGallery/IndexGallery.module.scss

@@ -1,70 +1,14 @@
-.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: 2rem;
-	.galleryimg {
-		--mheight: 18rem;
-		position: relative;
-		display: block;
-		margin: 0;
-		padding: 0;
-		max-height: var(--mheight);
-		animation-name: goIn;
-		animation-duration: 350ms;
-		@media screen and (max-width: 800px) {
-			text-decoration: none;
-			max-height: none;
-			text-align: center;
-		}
-		@keyframes goIn {
-			from {
-				opacity: 0;
-				transform: translate(0, 8px);
-			}
-		}
-		img {
-			max-height: var(--mheight);
-			border-radius: 8px;
-			@media screen and (max-width: 800px) {
-				max-width: 280px;
-			}
-		}
-		article {
-			position: absolute;
-			backdrop-filter: blur(8px);
-			background: rgba(#fff, 0.4);
-			color: var(--backdrop);
-			left: 0;
-			bottom: 0;
-			width: 100%;
-			padding: 0.25rem 0.5rem;
-			border-radius: 8px;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			transition-duration: 100ms;
-			opacity: 0;
-			p {
-				margin-bottom: 4px;
-			}
-			@media screen and (max-width: 800px) {
-				display: block;
-				position: relative;
-				background: unset;
-				color: var(--white0);
-				padding: 0;
-				opacity: 1;
-			}
-		}
-		&:hover {
-			article {
-				opacity: 1;
-			}
-		}
-	}
+.image:hover {
+	cursor: pointer;
+}
+.title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.subtitle {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }

components/IndexGallery/IndexGallery.tsx

@@ -1,6 +1,11 @@
 import styles from "./IndexGallery.module.scss";
 import Link from "next/link";
 import { useEffect, useState } from "react";
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+import ImageListItemBar from "@mui/material/ImageListItemBar";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 const IndexGallery = () => {
 	type apiResType = {
@@ -24,39 +29,40 @@ const IndexGallery = () => {
 				console.log(err);
 			});
 	}, []);
+	function redirect(
+		Link: string
+	): import("react").MouseEventHandler<HTMLImageElement> {
+		return (event: React.MouseEvent<HTMLImageElement>) => {
+			window.open(Link, "_blank");
+		};
+	}
+	const theme = useTheme();
+	const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 	return (
 		<>
 			<main>
 				<h2>galeria zdjęć idących mocno</h2>
 			</main>
-			<main className={styles.gallerycontainer}>
-				{data.map((el: apiResType) => {
-					return (
-						<Link key={el.Id} href={el.Link} className={styles.galleryimg}>
-							<img src={el.Link} alt={el.Description || el.Title} />
-							<article>
-								<h3>{el.Title}</h3>
-								<p>
-									{el.Place || ""}
-									{el.Place && el.Date ? ", " : ""}
-									{el.Date
-										? new Date(el.Date).getDate().toString().length == 2
-											? new Date(el.Date).getDate()
-											: "0" + new Date(el.Date).getDate()
-										: ""}
-									{"."}
-									{el.Date
-										? (new Date(el.Date).getMonth() + 1).toString().length == 2
-											? new Date(el.Date).getMonth() + 1
-											: "0" + (new Date(el.Date).getMonth() + 1)
-										: ""}
-									{"."}
-									{el.Date ? new Date(el.Date).getFullYear() : ""}
-								</p>
-							</article>
-						</Link>
-					);
-				})}
+			<main>
+				<ImageList variant="masonry" cols={isMobile ? 1 : 3} gap={8}>
+					{data.map((el: apiResType) => (
+						<>
+							<ImageListItem key={el.Id}>
+								<img
+									src={el.Link}
+									alt={el.Description || el.Title}
+									loading="lazy"
+									onClick={redirect(el.Link)}
+									className={styles.image}
+								></img>
+								<ImageListItemBar
+									title={el.Title}
+									subtitle={el.Place}
+								></ImageListItemBar>
+							</ImageListItem>
+						</>
+					))}
+				</ImageList>
 			</main>
 		</>
 	);

package.json

@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@auth0/nextjs-auth0": "^2.0.1",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/lab": "^5.0.0-alpha.163",
+    "@mui/material": "^5.15.7",
     "@types/node": "18.11.12",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",