feat: banner with telegram info

src/components/ChannelsList.tsx

@@ -0,0 +1,37 @@
+import DirectusImage from "./DirectusImage";
+import { useTranslationTable } from "@/locales";
+import styles from "@/styles/ChannelsList.module.scss";
+import { SocialLink } from "@/types/aliases";
+
+function Channel({ channel }: { channel: SocialLink }) {
+  return (
+    <a className={styles.channel} href={channel.link || ""} target="_blank">
+      <DirectusImage
+        className={styles.image}
+        name={channel.account_name}
+        img={channel.logo}
+        sizes="5rem"
+        cover
+      />
+      <p>{channel.account_name}</p>
+    </a>
+  );
+}
+
+export default function ChannelsList(props: { channels: SocialLink[] }) {
+  const tt = useTranslationTable();
+  return (
+    <div className={styles.main}>
+      <h1>{tt["join-our-channels"]}</h1>
+      <div className={styles.list}>
+        {props.channels
+          .sort(
+            (a, b) => a.account_name?.localeCompare(b.account_name || "") || -1
+          )
+          .map((c) => (
+            <Channel channel={c} key={c.id} />
+          ))}
+      </div>
+    </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,
@@ -89,6 +86,12 @@ export default function Home(
         <MembersList membership={props.committee} />
       </div>
 
+      {props.association.channels?.length == 0 ? (
+        <></>
+      ) : (
+        <ChannelsList channels={props.association.channels as SocialLink[]} />
+      )}
+
       <Decoration className={styles.decoration} />
 
       <Gallery
@@ -111,11 +114,23 @@ 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: ["*", { social_links_id: ["*"] }] },
+      ],
+    })
+  );
+
+  association.channels = association.channels?.map((c) => c.social_links_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,43 @@
+@use "./utilities/variables";
+
+.main {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: variables.$white-background-color;
+  padding-top: 2rem;
+}
+
+.image {
+  width: 6rem;
+  height: 6rem;
+  clip-path: circle();
+}
+
+.channel {
+  max-width: 6rem;
+
+  &:hover {
+    transition: transform 0.2s ease;
+    transform: translateY(-5px);
+  }
+}
+
+.list {
+  padding-top: 1rem;
+  display: flex;
+  gap: 4rem;
+  width: 100%;
+  align-items: baseline;
+  justify-content: center;
+
+  p {
+    margin: 0.5rem 0 0 0;
+    font-weight: 400;
+
+    color: variables.$dark-text-color;
+    text-align: center;
+  }
+}