galerie style

src/pages/galeries.tsx

@@ -1,21 +1,28 @@
 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 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>
+          <div className={styles["grid-wrapper"]}>
             {pictures?.map((picture) => (
-                            <div key={picture}>
-                              <Image src={picture} alt="" width={500} height={500} key={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>
@@ -26,9 +33,18 @@ export default function Galeries({ pictures }: { pictures: string[] }) {
 }
 
 export function getServerSideProps() {
+  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: ["https://picsum.photos/seed/1/500","https://picsum.photos/seed/2/500","https://picsum.photos/seed/3/500"],
+      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;
+}
+