feat: paragraph irudia sortzen du

front/src/views/orriBasikoa/OrriBasikoa.astro

@@ -4,6 +4,8 @@ import Layout from "../../layouts/Layout.astro";
 import Header from "views/_components/Header.astro";
 import Footer from "views/_components/Footer.astro";
 import MarkdownParser from "views/_components/MarkdownParser.astro";
+import { getImageData } from "models/ImageMedia";
+import EdukiLibrea from "./_components/EdukiLibrea.astro";
 
 interface Props {
   orriBasikoa: OrriBasikoa;
@@ -19,8 +21,8 @@ const { orriBasikoa } = Astro.props;
     <h1>{orriBasikoa.izenburua}</h1>
     <article>
       {
-        orriBasikoa.edukiLibrea.map((paragraphTestua) => (
-          <MarkdownParser content={paragraphTestua.testua} />
+        orriBasikoa.edukiLibrea.map((paragraph) => (
+          <EdukiLibrea paragraph={paragraph} />
         ))
       }
     </article>

front/src/views/orriBasikoa/_components/EdukiLibrea.astro

@@ -0,0 +1,23 @@
+---
+import type { Paragraph } from "models/OrriBasikoa";
+import ParagraphIrudia from "./ParagraphIrudia.astro";
+import ParagraphTestua from "./ParagraphTestua.astro";
+
+interface Props {
+  paragraph: Paragraph;
+}
+
+const { paragraph } = Astro.props;
+---
+
+{
+  paragraph.type === "ComponentParagraphIrudia" && (
+    <ParagraphIrudia media={paragraph.media} />
+  )
+}
+
+{
+  paragraph.type === "ComponentParagraphTestua" && (
+    <ParagraphTestua testua={paragraph.testua} />
+  )
+}

front/src/views/orriBasikoa/_components/ParagraphIrudia.astro

@@ -0,0 +1,26 @@
+---
+import { getImageData, type ImageMedia } from "models/ImageMedia";
+
+interface Props {
+  media: ImageMedia;
+}
+
+const { media } = Astro.props;
+
+const imageData = getImageData(media, { preferredFormat: "large" });
+---
+
+<img
+  class="irudia"
+  alt={media.alternativeText}
+  src={imageData.src}
+  width={imageData.width}
+  height={imageData.height}
+/>
+
+<style lang="scss">
+  img {
+    width: 100%;
+    height: auto;
+  }
+</style>

front/src/views/orriBasikoa/_components/ParagraphTestua.astro

@@ -0,0 +1,12 @@
+---
+import type { Markdown } from "models/Markdown";
+import MarkdownParser from "views/_components/MarkdownParser.astro";
+
+interface Props {
+  testua: Markdown;
+}
+
+const { testua } = Astro.props;
+---
+
+<MarkdownParser content={testua} />