feat: add channels banner

Author: Thechi2000

src/components/ChannelsList.tsx

@@ -0,0 +1,33 @@
+import DirectusImage from "./DirectusImage";
+import { useTranslationTable } from "@/locales";
+import styles from "@/styles/ChannelsList.module.scss";
+import { DirectusFile } from "@directus/sdk";
+
+function Channel({ file }: { file: DirectusFile }) {
+  const tt = useTranslationTable();
+
+  return (
+    <a className={styles.channel} href={file.location || ""} target="_blank">
+      <DirectusImage
+        className={styles.image}
+        name={file.title || tt.join_our_channels}
+        // @ts-expect-error
+        img={file}
+        cover
+      />
+      <p>{file.title || tt.join_our_channels}</p>
+    </a>
+  );
+}
+
+export default function ChannelsList(props: { channels: DirectusFile[] }) {
+  return (
+    <div className={styles.list}>
+      {props.channels
+        .sort((a, b) => a.title?.localeCompare(b.title || "") || -1)
+        .map((c) => (
+          <Channel file={c} key={c.id} />
+        ))}
+    </div>
+  );
+}

src/pages/index.tsx

@@ -3,6 +3,7 @@ import Decoration from "@/assets/decoration.svg";
 import PreviewImage from "@/assets/galleryPreview.png";
 import AssociationDescription from "@/components/AssociationDescription";
 import Button from "@/components/Button";
+import ChannelsList from "@/components/ChannelsList";
 import DirectusImage from "@/components/DirectusImage";
 import Gallery from "@/components/Gallery";
 import MembersList from "@/components/MembersList";
@@ -16,11 +17,7 @@ import {
   getDirectusImageUrl,
   populateLayoutProps,
 } from "@/directus";
-import {
-  getTranslation,
-  queryTranslations,
-  useTranslationTable,
-} from "@/locales";
+import { getTranslation, useTranslationTable } from "@/locales";
 import styles from "@/styles/Homepage.module.scss";
 import {
   Association,
@@ -77,6 +74,8 @@ export default function Home(
 
       <PartnersList id="partners" partners={props.partners} background={true} />
 
+      <ChannelsList channels={props.association.channels} />
+
       <div className={styles.associationDesciption}>
         <div className={styles.center}>
           <AssociationDescription
@@ -111,11 +110,24 @@ export const getServerSideProps: GetServerSideProps<
     gallery: any[];
   } & LayoutProps
 > = populateLayoutProps(async (_) => {
+  var association = await directus().request(
+    readSingleton("association", {
+      fields: [
+        "*",
+        // @ts-expect-error
+        { translations: ["*"] },
+        // @ts-expect-error
+        { channels: ["*", { directus_files_id: ["*"] }] },
+      ],
+    })
+  );
+
+  // @ts-expect-error
+  association.channels = association.channels.map((c) => c.directus_files_id);
+
   return {
     props: {
-      association: await directus().request(
-        readSingleton("association", queryTranslations as any)
-      ),
+      association,
       partners: (await directus()
         .request(
           readItems("association_partners", {

src/styles/ChannelsList.module.scss

@@ -0,0 +1,24 @@
+.image {
+  width: 6rem;
+  height: 6rem;
+  clip-path: circle();
+}
+
+.channel {
+  max-width: 6rem;
+}
+
+.list {
+  padding: 1rem;
+
+  display: flex;
+  gap: 2rem;
+
+  p {
+    margin: 0.5rem 0 0 0;
+    font-weight: 400;
+
+    color: #eee;
+    text-align: center;
+  }
+}