next session

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    import { pages, rerender } from "../../store"
+    import { navigate } from "svelte-routing/src/history"
+    export let pageId: string
+    export let col: Column
+    let hover = -1
+</script>
+
+<div class="persons">
+    {#each col.personPreview as pp, i}
+        <button
+            class="person"
+            on:click="{() => {
+                $rerender = $rerender + 1
+                navigate(Object.values($pages)?.find((o) => o.id == pp.link)?.path || '/')
+            }}"
+        >
+            <div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
+                {#if hover == i}
+                    <img src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}" alt="img" />
+                {:else}
+                    <img src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}" alt="img" />
+                {/if}
+            </div>
+            <div class="text">
+                {pp.name}
+            </div>
+        </button>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .persons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 80px;
+        .person {
+            cursor: pointer;
+            margin: 40px 0px;
+            display: flex;
+            flex-direction: column;
+            .image {
+                width: 290px;
+                height: 368px;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                }
+            }
+            .text {
+                width: 100%;
+                background-color: @bg-color-secondary;
+                color: @font-color-secondary;
+                border: 2px solid @bg-color-secondary;
+                padding: 2px 15px;
+                font-weight: bold;
+            }
+        }
+    }
+</style>