From 5f4e32f16d142a935d27191401ce15df71b886a8 Mon Sep 17 00:00:00 2001
From: "Aitor C. Urrutia Aranburu" <aitorcurrutia@gmail.com>
Date: Wed, 24 Sep 2025 18:51:34 +0200
Subject: [PATCH] feat: sarrera sortzen du

---
 front/src/models/Ekintza.ts                   | 11 ++--
 front/src/views/ekintza/Ekintza.astro         |  3 +
 .../views/ekintza/_components/Sarrera.astro   | 62 +++++++++++++++++++
 3 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 front/src/views/ekintza/_components/Sarrera.astro

diff --git a/front/src/models/Ekintza.ts b/front/src/models/Ekintza.ts
index fbb9661..a098c87 100644
--- a/front/src/models/Ekintza.ts
+++ b/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: {
-    label: string;
-    deskribapena: string;
-  };
+  sarrera: Sarrera;
   mainMedia: ImageMedia;
   zikloa: Pick<Zikloa, "izena" | "slug">;
 }
diff --git a/front/src/views/ekintza/Ekintza.astro b/front/src/views/ekintza/Ekintza.astro
index 5610db1..d9b460c 100644
--- a/front/src/views/ekintza/Ekintza.astro
+++ b/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">
diff --git a/front/src/views/ekintza/_components/Sarrera.astro b/front/src/views/ekintza/_components/Sarrera.astro
new file mode 100644
index 0000000..fd92392
--- /dev/null
+++ b/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>