zwischenstand

frontend/src/lib/components/CrinkledSection.svelte

@@ -1,33 +1,44 @@
-<script>
+<script lang="ts">
     import TopRightCrinkle from "./widgets/TopRightCrinkle.svelte"
-    export let brightBackground = true
-    export let border = true
-    export let activated = true
-    export let icon = ""
-    export let bigVersion = false
+
+    let {
+        brightBackground,
+        border,
+        activated,
+        icon,
+        bigVersion,
+        contentSnippet,
+    }: {
+        brightBackground?: boolean
+        border?: boolean
+        activated?: boolean
+        icon?: string
+        bigVersion?: boolean
+        contentSnippet: () => any
+    } = $props()
 </script>
 
 {#if activated}
     <section
         id="crinkled-section"
-        class={brightBackground ? 'bright' : 'dark'}
+        class={brightBackground ? "bright" : "dark"}
     >
         <div class="upper-row">
             <div
                 class="bar"
-                class:border={border}
+                class:border
             ></div>
             <TopRightCrinkle
                 edges={border}
                 brightColor={!brightBackground}
-                icon={icon}
-                bigVersion={bigVersion}
+                {icon}
+                {bigVersion}
             />
         </div>
-        <slot />
+        {@render contentSnippet()}
     </section>
 {:else}
-    <slot />
+    {@render contentSnippet()}
 {/if}
 
 <style lang="less">
@@ -57,7 +68,18 @@
                 }
             }
         }
+
+        &.bright {
+            background: var(--neutral-white);
+            .bar {
+                background: var(--neutral-white);
+                &.border {
+                    border-top: 2px solid var(--bg-100);
+                }
+            }
+        }
         &.dark {
+            background: var(--bg-100);
             .bar {
                 background: var(--bg-100);
                 &.border {