form

frontend/src/lib/components/pagebuilder/form/checkboxGroup.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { Writable } from "svelte/store"
+    export let groupTitle: string
+    export let checkboxes: { name: string; emailName: string }[]
+    export let formValues: Writable<FormValues>
+    export let rowNr: number
+</script>
+
+<div class="checkbox-group">
+    <h3>{groupTitle}</h3>
+    <div class="containerr">
+        {#each checkboxes as checkbox, i}
+            <label class="checkbox-label">
+                <input
+                    type="checkbox"
+                    class="checkbox-input checkit"
+                    bind:this="{$formValues[`checkbox_${groupTitle}_${rowNr}_${checkbox.emailName}`]}"
+                />
+                <span class="checkit-span"></span>
+                {checkbox.name}
+            </label>
+        {/each}
+    </div>
+</div>
+
+<style lang="less">
+    .checkbox-group {
+        .checkbox-input {
+            vertical-align: middle;
+            margin-right: 8px;
+            width: fit-content !important;
+        }
+
+        .checkbox-label {
+            width: 100%;
+            vertical-align: middle;
+            align-items: center;
+            display: flex;
+            gap: 10px;
+        }
+        & > .containerr {
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+    }
+</style>