Import repositories from gitlab

next/app/sponsor/page.js

@@ -0,0 +1,63 @@
+import getData from "@/api";
+import styles from "./style.module.scss";
+import Link from "next/link";
+import Empty from "@/components/empty";
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata() {
+  return {
+    metadataBase: `${process.env.NEXT_PUBLIC_ORIGIN}`,
+    title: "Partenaires",
+  };
+}
+
+export default async function Sponsor() {
+  const site = await getData("site", {
+    populate: {
+      edition: {
+        fields: [],
+        populate: {
+          sponsors: {
+            fields: ["name", "uri", "image"],
+            populate: {
+              image: {
+                fields: ["alternativeText", "name", "url"],
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+  const edition = site.data?.attributes.edition.data.attributes;
+  const sponsors = edition?.sponsors.data;
+
+  return (
+    <main className={styles.main}>
+      <h2>Ils nous soutiennent</h2>
+      {sponsors && sponsors.length > 0 ? (
+        <section className={styles.sponsors}>
+          {sponsors.map(({ id, attributes: attr }) => {
+            return (
+              <figure key={id}>
+                <Link target="_blank" href={attr.uri}>
+                  <img
+                    alt={attr.image.data.attributes.alternativeText}
+                    src={`${process.env.NEXT_PUBLIC_IMG_URI}${attr.image.data.attributes.url}`}
+                  />
+                </Link>
+                <figcaption>
+                  <Link target="_blank" href={attr.uri}>
+                    {attr.name}
+                  </Link>
+                </figcaption>
+              </figure>
+            );
+          })}
+        </section>
+      ) : (
+        <Empty message="Pas de sponsors à afficher pour l'édition en cours" />
+      )}
+    </main>
+  );
+}

next/app/sponsor/style.module.scss

@@ -0,0 +1,49 @@
+.main {
+    flex: 1 1 0%;
+    display: flex;
+    flex-flow: column;
+
+    h2 {
+        align-self: center;
+        font-family: var(--font-details);
+        font-size: 2rem;
+        font-weight: 400;
+    }
+}
+
+.sponsors {
+    display: grid;
+    grid-template-columns: repeat(4, 20rem);
+    place-items: end center;
+    align-self: center;
+
+    figure {
+        padding: 1rem 0px;
+    }
+
+    figcaption {
+        padding: 0.25rem 0px;
+        text-align: center;
+    }
+
+    img {
+        width: 13.5rem;
+    }
+}
+
+.sponsors figure:last-child {
+    grid-column-start: span 4;
+}
+
+@media only screen and (max-width: 70rem) {
+    .sponsors {
+        grid-template-columns: 80vw;
+
+        img {
+            width: calc(80vw - 20rem);
+        }
+    }
+    .sponsors figure:last-child {
+        grid-column-start: unset;
+    }
+}