feat: antolatzailea erakusten du

front/src/views/ekintza/Ekintza.astro

@@ -10,6 +10,7 @@ import { getUrl } from "models/Zikloa";
 import { getImageData } from "models/ImageMedia";
 
 import "dayjs/locale/eu";
+import Elkarlana from "./_components/Elkarlana.astro";
 dayjs.locale("eu");
 
 interface Props {
@@ -37,6 +38,14 @@ const irudia = ekintza.mainMedia ? getImageData(ekintza.mainMedia) : null;
           />
         )
       }
+
+      {
+        ekintza.elkarlana && (
+          <div class="elkarlana-wrapper-desktop">
+            <Elkarlana elkarlana={ekintza.elkarlana} />
+          </div>
+        )
+      }
     </aside>
     <article>
       <h1>{ekintza.izenburua}</h1>
@@ -66,6 +75,14 @@ const irudia = ekintza.mainMedia ? getImageData(ekintza.mainMedia) : null;
           </div>
         )
       }
+
+      {
+        ekintza.elkarlana && (
+          <div class="elkarlana-wrapper-mobile">
+            <Elkarlana elkarlana={ekintza.elkarlana} />
+          </div>
+        )
+      }
     </article>
   </main>
 
@@ -178,8 +195,26 @@ const irudia = ekintza.mainMedia ? getImageData(ekintza.mainMedia) : null;
   .deskribapena {
     margin-top: var(--space-04-mobile);
 
+    color: var(--marroia);
+
     @include mediaQueries.aboveTablet {
       margin-top: var(--space-05-desktop);
     }
   }
+
+  .elkarlana-wrapper-desktop {
+    margin-top: var(--space-07-desktop);
+
+    @include mediaQueries.belowTablet {
+      display: none;
+    }
+  }
+
+  .elkarlana-wrapper-mobile {
+    margin-top: var(--space-05-mobile);
+
+    @include mediaQueries.aboveTablet {
+      display: none;
+    }
+  }
 </style>

front/src/views/ekintza/_components/Elkarlana.astro

@@ -0,0 +1,87 @@
+---
+import { type Elkarlana } from "models/Ekintza";
+import { getImageData } from "models/ImageMedia";
+
+interface Props {
+  elkarlana: Elkarlana;
+}
+
+const { elkarlana } = Astro.props;
+---
+
+<div>
+  <h2>{elkarlana.label}</h2>
+
+  {
+    elkarlana.erakundeak?.map((erakundea) => {
+      const irudia = erakundea.logo ? getImageData(erakundea.logo) : null;
+
+      return (
+        <a href={erakundea.esteka}>
+          {irudia && (
+            <img
+              src={irudia.src}
+              height={irudia.height}
+              width={irudia.width}
+              alt={irudia.alt}
+            />
+          )}
+
+          <span>{erakundea.izena}</span>
+        </a>
+      );
+    })
+  }
+</div>
+
+<style lang="scss">
+  @use "../../../style/mixins/displayFonts.scss";
+  @use "../../../style/tools/mediaQueries.scss";
+
+  h2 {
+    @include displayFonts.display5;
+    color: var(--gorria);
+    margin-bottom: var(--space-03-mobile);
+
+    @include mediaQueries.aboveTablet {
+      margin-bottom: var(--space-05-desktop);
+    }
+  }
+
+  a {
+    display: inline-flex;
+    gap: var(--space-02-mobile);
+
+    color: var(--marroia);
+    text-decoration: none;
+
+    transition: opacity 0.3s ease-in;
+
+    @include displayFonts.display6;
+
+    @include mediaQueries.aboveTablet {
+      gap: var(--space-02-desktop);
+    }
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: var(--space-03-mobile);
+
+      @include mediaQueries.aboveTablet {
+        gap: var(--space-04-desktop);
+      }
+    }
+  }
+
+  img {
+    height: var(--space-08-mobile);
+    width: auto;
+
+    @include mediaQueries.aboveTablet {
+      height: var(--space-08-desktop);
+    }
+  }
+</style>