next session

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+    import { pages } from "../../store"
+    export let col: Column
+</script>
+
+<div class="link-container">
+    {#each col.pageLinkBlocks as link}
+        {#if isNaN(link.rowNr)}
+            <button
+                class="page-ref"
+                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+            >
+                {link.name}
+            </button>
+        {:else}
+            <button
+                class="row-ref"
+                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+            >
+                {link.name} <img src="/media/arrow-r.svg" alt="arrow" />
+            </button>
+        {/if}
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .link-container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 20px;
+        button {
+            background-color: @bg-color;
+            color: @font-color;
+            padding: 2px 15px;
+            font-size: 14px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .row-ref {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            border: 2px solid @bg-color-secondary;
+            img {
+                width: 20px;
+                height: auto;
+            }
+        }
+
+        .page-ref {
+            background-color: @bg-color-secondary;
+            color: @font-color-secondary;
+            border: 2px solid @bg-color-secondary;
+        }
+    }
+</style>