Dropdown and Toggle Elements

src/components/settings/System.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-
+    import Dropdown from "./elements/Dropdown.svelte";
+    import Toggle from "./elements/Toggle.svelte";
 </script>
 
-<h1>System</h1>
+<h1>System</h1>
+<div class="gap-2 my-2 flex flex-col items-start">
+    <Toggle value={true} label={"Test"} />
+    <Dropdown values={["Test", "test2", "Test 3: Test Harder"]} selectedValue={"Test"} label={"Test Dropdown"} />
+</div>

src/components/settings/elements/Dropdown.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { Icon, ChevronDown } from "svelte-hero-icons";
+
+    export let values: string[];
+    export let selectedValue: string;
+    export let label: string;
+
+    let isDropdownOpen = false;
+
+    function toggleDropdown() {
+        isDropdownOpen = !isDropdownOpen;
+    }
+
+    function changeSelectedValue(value: string) {
+        selectedValue = value;
+        toggleDropdown();
+    }
+</script>
+
+<div class="flex flex-row gap-5 items-center">
+    <div class="w-56">
+        <p>{label}</p>
+    </div>
+    <div>
+        <button on:click={toggleDropdown} type="button" class="inline-flex gap-2 items-center rounded border border-neutral-600 bg-neutral-700 text-white px-2 py-1 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
+            {selectedValue}
+            <div class="flex-grow" />
+            <div class="w-5 h-5">
+                <Icon src="{ChevronDown}" solid />
+            </div>
+        </button>
+
+        <div class="{isDropdownOpen ? "" : "hidden"} absolute mt-1 z-10 rounded border border-neutral-600 bg-neutral-700 text-white p-1 shadow-sm">
+            <ul class="inline-flex flex-col gap-1 w-full">
+                {#each values as value}
+                    <button class="{selectedValue == value ? "bg-blue-600" : "hover:bg-neutral-600"} rounded px-2 py-1 text-left" on:click={() => changeSelectedValue(value)}>
+                        <li>
+                            {value}
+                        </li>
+                    </button>
+                {/each}
+            </ul>
+        </div>
+    </div>
+</div>

src/components/settings/elements/Toggle.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let value: boolean;
+    export let label: string;
+</script>
+
+<label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" value={value} class="sr-only peer">
+    <div class="relative w-11 h-6 bg-neutral-700 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600 peer-checked:bg-blue-600" />
+    <span class="ms-3 text-sm font-medium text-gray-300">{label}</span>
+</label>