initial stuff

src/components/Dropdown.svelte

@@ -0,0 +1,71 @@
+<script>
+  import Button from "./Button.svelte";
+  import ButtonBorderless from "./ButtonBorderless.svelte";
+
+  // Props
+  export let name = "";
+  export let variant = "default"; // 'default' | 'borderless' aka 'Button' | 'ButtonBorderless'
+
+  let isOpen = false;
+
+  const toggle = () => (isOpen = !isOpen);
+  const close = () => (isOpen = false);
+
+  function handleFocusOut({ relatedTarget, currentTarget }) {
+    if (
+      relatedTarget instanceof HTMLElement &&
+      currentTarget.contains(relatedTarget)
+    )
+      return;
+    close();
+  }
+</script>
+
+<div class="relative inline-block" on:focusout={handleFocusOut}>
+  {#if variant === "borderless"}
+    <ButtonBorderless onClick={toggle}>
+      {name}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        class="w-5 ml-2 mt-1 transition-transform inline-block"
+        style:transform={isOpen ? "rotate(180deg)" : "none"}
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m19.5 8.25-7.5 7.5-7.5-7.5"
+        />
+      </svg>
+    </ButtonBorderless>
+  {:else}
+    <Button onClick={toggle}>
+      {name}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        class="w-5 ml-2 mt-1 transition-transform inline-block"
+        style:transform={isOpen ? "rotate(180deg)" : "none"}
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m19.5 8.25-7.5 7.5-7.5-7.5"
+        />
+      </svg>
+    </Button>
+  {/if}
+
+  <div
+    class="absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 overflow-hidden flex flex-col"
+    style:visibility={isOpen ? "visible" : "hidden"}
+  >
+    <slot />
+  </div>
+</div>