your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { Button, Modal, toast } from '@foxui/core';
3
4 let {
5 open = $bindable(),
6 success,
7 handle,
8 page
9 }: {
10 open: boolean;
11 success: boolean;
12 handle: string;
13 page: string;
14 } = $props();
15
16 function getShareUrl() {
17 const base = typeof window !== 'undefined' ? window.location.origin : '';
18 const pagePath = page && page !== 'blento.self' ? `/${page.replace('blento.', '')}` : '';
19 return `${base}/${handle}${pagePath}`;
20 }
21
22 async function copyShareLink() {
23 const url = getShareUrl();
24 await navigator.clipboard.writeText(url);
25 toast.success('Link copied to clipboard!');
26 }
27</script>
28
29<Modal {open} closeButton={false}>
30 <div class="flex flex-col items-center gap-4">
31 {#if !success}
32 <div class="flex items-center gap-4">
33 <svg
34 class="text-accent-500 size-8 animate-spin"
35 xmlns="http://www.w3.org/2000/svg"
36 fill="none"
37 viewBox="0 0 24 24"
38 >
39 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
40 ></circle>
41 <path
42 class="opacity-75"
43 fill="currentColor"
44 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
45 ></path>
46 </svg>
47 <p class="text-base-700 dark:text-base-300 text-3xl font-bold">Saving...</p>
48 </div>
49 {:else}
50 <div class="flex items-center gap-4">
51 <svg
52 xmlns="http://www.w3.org/2000/svg"
53 viewBox="0 0 24 24"
54 fill="currentColor"
55 class="text-accent-500 size-8"
56 >
57 <path
58 fill-rule="evenodd"
59 d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
60 clip-rule="evenodd"
61 />
62 </svg>
63
64 <p class="text-base-700 dark:text-base-300 text-3xl font-bold">Website Saved</p>
65 </div>
66 <div class="mt-8 flex w-full flex-col gap-2">
67 <Button size="lg" onclick={copyShareLink}>
68 <svg
69 xmlns="http://www.w3.org/2000/svg"
70 fill="none"
71 viewBox="0 0 24 24"
72 stroke-width="1.5"
73 stroke="currentColor"
74 class="size-5"
75 >
76 <path
77 stroke-linecap="round"
78 stroke-linejoin="round"
79 d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
80 />
81 </svg>
82 Share link
83 </Button>
84 <Button variant="ghost" onclick={() => (open = false)}>Close</Button>
85 </div>
86 {/if}
87 </div>
88</Modal>