File size: 3,625 Bytes
cf47645 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<script lang="ts" module>
let project = $state<Project>();
export function showShareModal(p: Project) {
project = p;
}
function close() {
project = undefined;
}
</script>
<script lang="ts">
import { clickOutside } from "$lib/actions/click-outside.js";
import { session } from "$lib/state/session.svelte";
import type { Project } from "$lib/types.js";
import { onMount } from "svelte";
import { fade, scale } from "svelte/transition";
import IconCross from "~icons/carbon/close";
import IconCopy from "~icons/carbon/copy";
import LocalToasts from "./local-toasts.svelte";
import { encodeObject } from "$lib/utils/encode.js";
import { copyToClipboard } from "$lib/utils/copy.js";
let dialog: HTMLDialogElement | undefined = $state();
onMount(() => {
// JUST FOR DEVELOPMENT
project = session.project;
});
const open = $derived(!!project);
const encoded = $derived(encodeObject(project));
$effect(() => {
if (open) {
dialog?.showModal();
} else {
setTimeout(() => dialog?.close(), 250);
}
});
</script>
<dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => close()}>
{#if open}
<!-- Backdrop -->
<div
class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
transition:fade={{ duration: 150 }}
>
<!-- Content -->
<div
class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900"
use:clickOutside={() => close()}
transition:scale={{ start: 0.975, duration: 250 }}
>
<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
<h2 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">Sharing</h2>
<button
type="button"
class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
onclick={close}
>
<div class="text-xl">
<IconCross />
</div>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-4 md:p-5">
<h3 class="text-lg font-semibold">Share your project</h3>
<p>Copy an unique string that shares your entire project until this point.</p>
<div class="mt-4 flex gap-2">
<input
class="grow cursor-not-allowed rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
type="text"
value={encoded}
disabled
/>
<LocalToasts>
{#snippet children({ addToast, trigger })}
<button
{...trigger}
class="btn flex items-center gap-2"
onclick={() => {
copyToClipboard(encoded);
addToast("Copied to clipboard");
}}
>
<IconCopy />
Copy
</button>
{/snippet}
</LocalToasts>
</div>
</div>
<!-- Modal footer -->
<!--
<div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
<button
type="submit"
class="ml-auto rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
>Submit</button
>
</div>
-->
</div>
</div>
{/if}
</dialog>
|