frontend session

frontend/src/lib/components/widgets/image.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    export let image: FileField
+    export let pageId: string
+</script>
+
+<div class="image-container">
+    <img src="{`${apiBaseURL}page/${pageId}/${image?.src}`}" alt="img" />
+</div>
+
+<style lang="less">
+    .image-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            object-fit: contain;
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>

frontend/src/lib/components/widgets/moreBtn.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { navigate } from "svelte-routing"
+
+    export let path: string
+</script>
+
+<button class="more" on:click="{() => navigate(path)}"> mehr </button>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .more {
+        background-color: @bg-color-secondary;
+        color: @font-color-secondary;
+        border: none;
+        height: 36px;
+        padding: 2px 15px;
+        font-size: 14px;
+        font-weight: bold;
+        cursor: pointer;
+    }
+</style>

frontend/src/lib/components/widgets/text.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    export let text: string
+</script>
+
+<div class="text">
+    {@html text}
+</div>
+
+<style>
+    .text {
+        text-align: left;
+    }
+</style>

frontend/src/lib/components/widgets/textLink.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import MoreBtn from "../widgets/moreBtn.svelte"
+    import Text from "../widgets/text.svelte"
+    export let description = ""
+    export let path = ""
+</script>
+
+<div class="textLink">
+    <Text text="{description}" />
+    <MoreBtn path="{path}" />
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .textLink {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        gap: 20px;
+    }
+</style>