icon cycle circle

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    import { onMount } from "svelte"
+
+    export let col: Column
+    export let pageId: string
+
+    let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
+    let angleStep = 360 / count
+    let radius = 100 // Distance from center
+
+    let circles = []
+
+    onMount(() => {
+        for (let i = 0; i < count; i++) {
+            let angle = angleStep * i * (Math.PI / 180) // Convert to radians
+
+            circles.push({
+                x: radius * Math.cos(angle),
+                y: radius * Math.sin(angle),
+                rotation: angleStep * i - 90, // subtract 90 to point towards the circle
+            })
+        }
+        circles = circles
+    })
+</script>
+
+<div class="main-circle">
+    {#each circles as { x, y, rotation }}
+        <div class="circle" style="transform: translate(calc(100px + {x}px - 25px), calc(100px + {y}px - 25px))"></div>
+        <div
+            class="arrow"
+            style="transform: translate(calc(100px + {x / 2}px - 1px), calc(100px + {y /
+                2}px - 25px)) rotate({rotation}deg)"
+        ></div>
+    {/each}
+</div>
+
+<style lang="less">
+    .main-circle {
+        position: relative;
+        width: 200px;
+        height: 200px;
+        margin: auto;
+        background: red;
+        border-radius: 50%;
+    }
+
+    .circle {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        background: blue;
+        z-index: 100;
+        border-radius: 50%;
+        transform-origin: center;
+    }
+
+    .arrow {
+        position: absolute;
+        width: 2px;
+        height: 50px;
+        background: black;
+        transform-origin: center;
+    }
+</style>