1 files changed, 36 insertions, 0 deletions
diff --git a/src/components/CollapsableContent.svelte b/src/components/CollapsableContent.svelte
new file mode 100644
index 0000000..e75fbf1
--- /dev/null
+++ b/src/components/CollapsableContent.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import ChevronDown from '~/sf-symbols/chevron.down.svg';
+</script>
+
+<details>
+    <summary>
+        <slot name="summary" />
+        <ChevronDown />
+    </summary>
+
+    <slot />
+</details>
+
+<style>
+    details[open] summary {
+        display: none;
+    }
+
+    summary {
+        list-style: none;
+        cursor: pointer;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
+    summary :global(svg) {
+        overflow: visible;
+        width: 14px;
+        fill: var(--systemTertiary);
+        position: relative;
+        top: 3px;
+        left: 2px;
+    }
+</style>