feat: sarrera sortzen du

front/src/models/Ekintza.ts

@@ -9,6 +9,12 @@ export interface Elkarlana {
   erakundeak?: Erakundea[];
 }
 
+export interface Sarrera {
+  label: string;
+  deskribapena?: string;
+  url?: string;
+}
+
 export interface Ekintza {
   id: string;
   slug: string;
@@ -18,10 +24,7 @@ export interface Ekintza {
   deskribapena: string;
   hitzordua: string;
   elkarlana?: Elkarlana;
-  sarrera: {
+  sarrera: Sarrera;
-    label: string;
-    deskribapena: string;
-  };
   mainMedia: ImageMedia;
   zikloa: Pick<Zikloa, "izena" | "slug">;
 }

front/src/views/ekintza/Ekintza.astro

@@ -11,6 +11,7 @@ import { getImageData } from "models/ImageMedia";
 
 import "dayjs/locale/eu";
 import Elkarlana from "./_components/Elkarlana.astro";
+import Sarrera from "./_components/Sarrera.astro";
 dayjs.locale("eu");
 
 interface Props {
@@ -68,6 +69,8 @@ const irudia = ekintza.mainMedia ? getImageData(ekintza.mainMedia) : null;
 
       <h2>{ekintza.titularra}</h2>
 
+      {ekintza.sarrera && <Sarrera sarrera={ekintza.sarrera} />}
+
       {
         ekintza.deskribapena && (
           <div class="deskribapena">

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

@@ -0,0 +1,62 @@
+---
+import type { Sarrera } from "models/Ekintza";
+
+interface Props {
+  sarrera: Sarrera;
+}
+
+const { sarrera } = Astro.props;
+---
+
+{
+  sarrera.url ? (
+    <a href={sarrera.url}>{sarrera.label}</a>
+  ) : (
+    <p class="label">{sarrera.label}</p>
+  )
+}
+
+<p class="deskribapena">{sarrera.deskribapena}</p>
+
+<style lang="scss">
+  @use "../../../style/mixins/displayFonts.scss";
+  @use "../../../style/mixins/textFonts.scss";
+  @use "../../../style/tools/toDVW.scss";
+  @use "../../../style/tools/mediaQueries.scss";
+
+  .label {
+    color: var(--marroia);
+    @include displayFonts.display6;
+  }
+
+  .deskribapena {
+    margin-top: var(--space-01-mobile);
+
+    color: var(--marroia);
+    font-style: italic;
+    @include textFonts.captionFont;
+    @include mediaQueries.aboveTablet {
+      margin-top: var(--space-01-desktop);
+    }
+  }
+
+  a {
+    display: inline-block;
+    padding: var(--space-02-mobile) var(--space-03-mobile);
+
+    color: var(--marroia);
+    text-decoration: none;
+    border: #{toDVW.toMobileDVW(2)} solid var(--marroia);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    @include displayFonts.display6;
+    @include mediaQueries.aboveTablet {
+      padding: var(--space-02-desktop) var(--space-04-desktop);
+
+      border: #{toDVW.toDesktopDVW(2)} solid var(--marroia);
+    }
+  }
+</style>