feat: add Gallery component

app/src/components/Gallery.tsx

@@ -0,0 +1,47 @@
+import DirectusImage from "./DirectusImage";
+import styles from "@/styles/Gallery.module.scss";
+import { components } from "@/types/schema";
+
+export default function Gallery({
+  imgs,
+  limit = 15,
+}: {
+  imgs?: (string | components["schemas"]["Files"])[] | null;
+  limit: number;
+}) {
+  if (imgs) {
+    imgs = imgs.slice(0, limit);
+
+    var content: any = [];
+
+    var count_5 = 0;
+    var count_3 = 0;
+    imgs.map((img) => {
+      var is_long_5 = Math.random() > 0.5 && count_5 < 4;
+      count_5 += is_long_5 ? 2 : 1;
+      count_5 %= 5;
+
+      var is_long_3 = Math.random() > 0.5 && count_3 < 2;
+      count_3 += is_long_3 ? 2 : 1;
+      count_3 %= 3;
+
+      content.push(
+        <DirectusImage
+          img={img}
+          name={"gallery image"}
+          cover={true}
+          className={`${styles.image} ${is_long_3 ? styles.long_3 : ""} ${
+            is_long_5 ? styles.long_5 : ""
+          }`}
+        />
+      );
+    });
+
+    return (
+      <div className={styles.main}>
+        <h1>Gallery</h1>
+        <div className={styles.gallery}>{content}</div>
+      </div>
+    );
+  }
+}

app/src/pages/index.tsx

@@ -3,6 +3,7 @@ import PreviewImage from "@/assets/galleryPreview.png";
 import AssociationDescription from "@/components/AssociationDescription";
 import Button from "@/components/Button";
 import DirectusImage from "@/components/DirectusImage";
+import Gallery from "@/components/Gallery";
 import MembersList from "@/components/MembersList";
 import NewsCard from "@/components/NewsCard";
 import PartnersList from "@/components/PartnersList";
@@ -19,7 +20,7 @@ import {
   PublicFiles,
   SocialLink,
 } from "@/types/aliases";
-import { readItems, readSingleton } from "@directus/sdk";
+import { readFiles, readItems, readSingleton } from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 
@@ -80,6 +81,8 @@ export default function Home(
       <Decoration className={styles.decoration} />
 
       <MembersList membership={props.committee} />
+
+      <Gallery imgs={props.gallery} />
     </>
   );
 }
@@ -91,6 +94,7 @@ export const getServerSideProps: GetServerSideProps<{
   news: News[];
   committee: (AssociationMembership & { member: Member })[];
   publicFiles: PublicFiles[];
+  gallery: any[];
 }> = populateLayoutProps(async (_) => {
   return {
     props: {
@@ -143,6 +147,19 @@ export const getServerSideProps: GetServerSideProps<{
           fields: ["*", { translations: ["*"], icon: ["*"] }],
         })
       ),
+      gallery: await directus().request(
+        readFiles({
+          fields: ["*"],
+          filter: {
+            folder: {
+              _eq: "2fd1d075-83a4-40b7-902e-b46a0d861dfe",
+            },
+            type: {
+              _eq: "image/jpeg",
+            },
+          },
+        })
+      ),
     },
   };
 });

app/src/styles/Gallery.module.scss

@@ -0,0 +1,52 @@
+@use "utilities/variables";
+
+.main {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h1 {
+    margin: 2rem;
+    color: variables.$title-color;
+  }
+
+  .gallery {
+    display: grid;
+
+    grid-template-columns: repeat(5, 1fr);
+
+    grid-auto-rows: 20rem;
+
+    gap: 1rem;
+
+    height: auto;
+    width: 100%;
+
+    @media (max-width: 1200px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .image {
+      height: 100%;
+      width: 100%;
+      border-radius: 1rem;
+      overflow: hidden;
+      box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
+    }
+  }
+
+  .long_5 {
+    grid-column: span 2;
+
+    @media (max-width: 1200px) {
+      grid-column: span 1;
+    }
+  }
+
+  .long_3 {
+    @media (max-width: 1200px) {
+      grid-column: span 2;
+    }
+  }
+}