initial commit ??

src/lib/components/atoms/modal.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { createDialog } from "@melt-ui/svelte";
+  import clsx from "clsx";
+  import IconX from "~icons/bi/x";
+
+  const { trigger, portal, overlay, content, title, description, close, open } =
+    createDialog();
+</script>
+
+<div>
+  <button
+    {...$trigger}
+    use:trigger
+    class={clsx(
+      "inline-flex items-center justify-center rounded-md bg-white px-4 py-2 font-medium leading-none text-magnum-700 shadow-lg hover:opacity-75"
+    )}
+  >
+    Open Dialog
+  </button>
+  <div use:portal>
+    {#if $open}
+      <div {...$overlay} class="fixed inset-0 z-20 bg-black/50" />
+      <div
+        class="fixed left-[50%] top-[50%] z-30 max-h-[85vh] w-[90vw] max-w-[450px]
+				translate-x-[-50%] translate-y-[-50%] rounded-md bg-white p-[25px]
+				shadow-lg"
+        {...$content}
+        use:content
+      >
+        <h2 {...title} class="m-0 text-lg font-medium text-black">
+          Edit profile
+        </h2>
+        <p {...description} class="mb-5 mt-[10px] leading-normal text-zinc-600">
+          Make changes to your profile here. Click save when you're done.
+        </p>
+
+        <fieldset class="mb-4 flex items-center gap-5">
+          <label class="w-[90px] text-right text-magnum-800" for="name">
+            Name
+          </label>
+          <input
+            class="inline-flex h-8 w-full flex-1 items-center justify-center rounded-sm border
+						border-solid px-3 leading-none text-magnum-800"
+            id="name"
+            value="Thomas G. Lopes"
+          />
+        </fieldset>
+        <fieldset class="mb-4 flex items-center gap-5">
+          <label class="w-[90px] text-right text-magnum-800" for="username">
+            Username
+          </label>
+          <input
+            class="inline-flex h-8 w-full flex-1 items-center justify-center rounded-sm border
+						border-solid px-3 leading-none text-magnum-800"
+            id="username"
+            value="@thomasglopes"
+          />
+        </fieldset>
+        <div class="mt-[25px] flex justify-end gap-4">
+          <button
+            {...close}
+            use:close
+            class="inline-flex h-[35px] items-center justify-center rounded-[4px] bg-zinc-100
+					px-4 font-medium leading-none text-zinc-600"
+          >
+            Cancel
+          </button>
+          <button
+            {...close}
+            use:close
+            class="inline-flex h-[35px] items-center justify-center rounded-[4px] bg-magnum-100
+					px-4 font-medium leading-none text-magnum-900"
+          >
+            Save changes
+          </button>
+        </div>
+
+        <button
+          {...close}
+          use:close
+          class="absolute right-[10px] top-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full
+				text-magnum-800 hover:bg-magnum-100 focus:shadow-magnum-400"
+        >
+          <IconX />
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>