🎨 format

app/src/lib/components/SettingsCard.svelte

@@ -1,60 +1,76 @@
 <script lang="ts">
-  import { slide } from 'svelte/transition'
-  import { cubicOut } from 'svelte/easing'
-  import { Down } from './icons'
-  interface Props {
-    open?: boolean
-    collapsible?: boolean
-    icon?: import('svelte').Snippet
-    title?: import('svelte').Snippet
-    children?: import('svelte').Snippet
-    right?: import('svelte').Snippet
-  }
+    import { slide } from 'svelte/transition'
+    import { cubicOut } from 'svelte/easing'
+    import { Down } from './icons'
+    interface Props {
+        open?: boolean
+        collapsible?: boolean
+        icon?: import('svelte').Snippet
+        title?: import('svelte').Snippet
+        children?: import('svelte').Snippet
+        right?: import('svelte').Snippet
+    }
 
-  let { open = $bindable(true), collapsible = true, icon, title, children, right }: Props = $props()
+    let {
+        open = $bindable(true),
+        collapsible = true,
+        icon,
+        title,
+        children,
+        right
+    }: Props = $props()
 </script>
 
 {#if collapsible}
-  <div
-    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
     <div
-      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
-      <span class="inline-flex items-baseline">
-        {@render icon?.()}
-        {@render title?.()}
-      </span>
-      <button
-        class="btn btn-circle btn-ghost btn-sm"
-        onclick={() => {
-          open = !open
-        }}>
-        <Down
-          class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open ?
-            'rotate-180'
-          : ''}" />
-      </button>
+        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+    >
+        <div
+            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+        >
+            <span class="inline-flex items-baseline">
+                {@render icon?.()}
+                {@render title?.()}
+            </span>
+            <button
+                class="btn btn-circle btn-ghost btn-sm"
+                onclick={() => {
+                    open = !open
+                }}
+            >
+                <Down
+                    class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
+                        open
+                    ) ?
+                        'rotate-180'
+                    :   ''}"
+                />
+            </button>
+        </div>
+        {#if open}
+            <div
+                class="flex flex-col gap-2 p-4 pt-0"
+                transition:slide|local={{ duration: 300, easing: cubicOut }}
+            >
+                {@render children?.()}
+            </div>
+        {/if}
     </div>
-    {#if open}
-      <div
-        class="flex flex-col gap-2 p-4 pt-0"
-        transition:slide|local={{ duration: 300, easing: cubicOut }}>
-        {@render children?.()}
-      </div>
-    {/if}
-  </div>
 {:else}
-  <div
-    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
     <div
-      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
-      <span class="inline-flex items-baseline">
-        {@render icon?.()}
-        {@render title?.()}
-      </span>
-      {@render right?.()}
+        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+    >
+        <div
+            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+        >
+            <span class="inline-flex items-baseline">
+                {@render icon?.()}
+                {@render title?.()}
+            </span>
+            {@render right?.()}
+        </div>
+        <div class="flex flex-col gap-2 p-4 pt-0">
+            {@render children?.()}
+        </div>
     </div>
-    <div class="flex flex-col gap-2 p-4 pt-0">
-      {@render children?.()}
-    </div>
-  </div>
 {/if}