90 lines
2.8 KiB
Svelte
Executable File
90 lines
2.8 KiB
Svelte
Executable File
<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>
|