frontend session

frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte

@@ -1,8 +1,65 @@
 <script lang="ts">
+    import Image from "../widgets/image.svelte"
+    import Text from "../widgets/text.svelte"
+    import TextLink from "../widgets/textLink.svelte"
+
     export let row: Row
+    export let pageId: string
+    console.log(row, "row")
+    console.log(row.columns)
 </script>
 
-<div></div>
+{#if Object.keys(row).length}
+    {#if row.topTitle}
+        <h3>{row.topTitle}</h3>
+    {/if}
+    {#if row.pageTitle}
+        <h1>{row.pageTitle}</h1>
+    {/if}
+    {#if row.title}
+        <h2>{row.title}</h2>
+    {/if}
+    {#if row.subTitle}
+        <h3>{row.subTitle}</h3>
+    {/if}
+    <div class="row">
+        {#each row?.columns as col}
+            <div class="col">
+                {#if col?.contentType == "text"}
+                    <Text text="{col?.text}" />
+                {:else if col?.contentType == "textLink"}
+                    <TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" />
+                {:else if col.contentType == "image"}
+                    <Image image="{col?.image}" pageId="{pageId}" />
+                {/if}
+            </div>
+        {/each}
+    </div>
+{/if}
 
 <style lang="less">
+    @import "../../assets/css/main.less";
+    h3 {
+        font-size: 1.2rem;
+        padding-bottom: 20px;
+    }
+    h2 {
+        font-size: 3.2rem;
+    }
+    h1 {
+        font-size: 5rem;
+    }
+    h1,
+    h2 {
+        padding-bottom: 40px;
+    }
+
+    .row {
+        display: flex;
+        & > .col {
+            padding: 10px;
+            flex: 1;
+            min-width: 0;
+        }
+    }
 </style>