Create hero and text with image components

astro/src/components/web/Hero.astro

@@ -6,7 +6,6 @@ interface Props {
 }
 
 const hero = Astro.props.hero;
-console.log(hero);
 ---
 
 <div id={`hero-${hero.id}`} class="flex w-full">

astro/src/components/web/TextWithImage.astro

@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+    textWithImage: TextWithImageComponent;
+}
+
+const textWithImage = Astro.props.textWithImage;
+
+const imageSize = () => {
+    if (textWithImage.imageSize === "small") return "aspect-2/1";
+    else if (textWithImage.imageSize === "medium") return "aspect-26/17";
+    else return "aspect-39/29";
+}
+---
+
+<div id={`textwithimage-${textWithImage.id}`} class={`flex ${textWithImage.imageSide === "right" ? "flex-row" : "flex-row-reverse"} justify-between items-center py-20 px-12 container mx-auto gap-y-8 gap-x-18`}>
+    <div class="flex flex-col gap-2.5 w-[50%]">
+        <h2 class="text-5xl font-bold">{textWithImage.title}</h2>
+        { textWithImage.text !== null && (
+            <div>{textWithImage.text}</div>
+        ) }
+    </div>
+    <div class="w-[50%]">
+        <Image
+            src={textWithImage.image.url}
+            width={textWithImage.image.width}
+            height={textWithImage.image.height}
+            class={`rounded-2xl shadow-sm ${imageSize()} object-cover`}
+            alt=""
+        />
+    </div>
+</div>

astro/src/components/webpage/Webpage.astro

@@ -1,5 +1,6 @@
 ---
 import Hero from '../web/Hero.astro';
+import TextWithImage from '../web/TextWithImage.astro';
 
 interface Props {
     webpage: WebpageComponent[];
@@ -14,6 +15,7 @@ console.log(Astro.props.webpage);
     { components.map((component) => (
         <Fragment>
             { component.component === "Hero" && <Hero hero={component} /> }
+            { component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
         </Fragment>
     )) }
 </div>

astro/src/content/pages/pages.ts

@@ -47,6 +47,7 @@ export function dataToPage(pageRecord: any): WebPage {
                     title: component["twsi_title"],
                     text: component["twsi_text"],
                     imageSide: component["twsi_image_side"],
+                    imageSize: component["twsi_image_size"],
                     image: {
                         url: getImageUrl(component["image"]["filename_disk"]),
                         width: component["image"]["width"],

astro/src/graphql/pages/getAllPages.graphql

@@ -70,7 +70,8 @@ query getAllPages($date: String!) {
                         width,
                         height
                     },
-                    twsi_image_side: image_side
+                    twsi_image_side: image_side,
+                    twsi_image_size: image_size
                 }
                 
                 ...on Wall_Of_Text {

astro/src/graphql/pages/getPage.graphql

@@ -70,7 +70,8 @@ query getAllPages($date: String!, $route: String!) {
                         width,
                         height
                     },
-                    twsi_image_side: image_side
+                    twsi_image_side: image_side,
+                    twsi_image_size: image_size
                 }
                 
                 ...on Wall_Of_Text {

astro/src/types/components/textWithImage.d.ts

@@ -3,7 +3,8 @@ type TextWithImageComponent = {
 
     id: string;
     title: string;
-    text: string;
+    text: string | null;
     image: PhotoProps;
     imageSide: "left" | "right";
+    imageSize: "small" | "medium" | "large";
 }