galerie style

src/pages/galeries.tsx

@@ -1,34 +1,50 @@
 import { Layout } from "./index";
 import Image from "next/image";
 
+import styles from "../styles/Galerie.module.css";
+
 export default function Galeries({ pictures }: { pictures: string[] }) {
-    return (
-        <Layout title="Galeries">
-            <div className="container mx-auto p-8">
-                <div className="flex flex-col gap-6">
-                    <h1 className="text-4xl font-bold">Galeries</h1>
-                    <div className="flex flex-col gap-6">
-                        <p className="text-xl">
-                            Voici les photos des galeries du club.
-                        </p>
-                    </div>
-                    <div>
-                        {pictures?.map((picture) => (
-                            <div key={picture}>
-                              <Image src={picture} alt="" width={500} height={500} key={picture} />
-                          </div>
-                        ))}
-                        </div>
-                </div>
-            </div>
-        </Layout>
-    );
+  return (
+    <Layout title="Galeries">
+      <div className="container mx-auto p-8">
+        <div className="flex flex-col gap-6">
+          <div className="heading flex flex-col items-center gap-2">
+            <h1 className="text-4xl font-bold">Retrouvez toutes nos photos</h1>
+            <div className="separator w-1/2 border-b-2 border-slate-800"></div>
+          </div>
+          <div className={styles["grid-wrapper"]}>
+            {pictures?.map((picture) => (
+              <div key={picture.src} className={picture.className}>
+                <Image
+                  src={picture.src}
+                  alt={picture.alt}
+                  width={500}
+                  height={500}
+                  key={picture.src}
+                  className={styles["img"]}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
 }
 
 export function getServerSideProps() {
-    return {
-        props: {
-            pictures: ["https://picsum.photos/seed/1/500","https://picsum.photos/seed/2/500","https://picsum.photos/seed/3/500"],
-        },
-    };
+  let pictures = [];
+  const classes = ["wide", "tall", "big", ""];
+  for (let i = 0; i < 10; i++) {
+    pictures.push({
+      src: `https://picsum.photos/500/500?random=${i}`,
+      alt: "random image",
+      className: classes[Math.floor(Math.random() * classes.length)],
+    });
+  }
+  return {
+    props: {
+      pictures,
+    },
+  };
 }

src/styles/Galerie.module.css

@@ -0,0 +1,37 @@
+img.img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	display: inline-block;
+}
+
+.grid-wrapper > div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.grid-wrapper > div > img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: 5px;
+}
+
+.grid-wrapper {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	grid-auto-rows: 200px;
+	grid-auto-flow: dense;
+}
+.grid-wrapper .wide {
+	grid-column: span 2;
+}
+.grid-wrapper .tall {
+	grid-row: span 2;
+}
+.grid-wrapper .big {
+	grid-column: span 2;
+	grid-row: span 2;
+}
+