56 lines
1.4 KiB
Svelte
56 lines
1.4 KiB
Svelte
<script>
|
|
import IoMdClipboard from 'svelte-icons/io/IoMdClipboard.svelte'
|
|
import IoMdLink from 'svelte-icons/io/IoMdLink.svelte'
|
|
import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
|
|
import { writeText } from 'clipboard-polyfill';
|
|
import { Button, TextField, Loading } from 'attractions';
|
|
|
|
let isLoaded = false;
|
|
let error = null;
|
|
</script>
|
|
|
|
<style>
|
|
#clipboard {
|
|
width: 450px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
#theeverything {
|
|
text-align: center;
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
}
|
|
.center {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center
|
|
}
|
|
</style>
|
|
|
|
<div id="theeverything">
|
|
<div class="center">
|
|
<div id="clipboard">
|
|
<div style="flex-grow: 1">
|
|
<TextField outline withItem value={window.location.toString()} disabled>
|
|
<div style="width: 16px; height: 16px; display: inline-block" class="item"><IoMdLink/></div>
|
|
</TextField>
|
|
</div>
|
|
<Button outline on:click={() => {writeText(window.location.toString())}}><div style="width: 19px; height: 19px; display: inline-block"><IoMdClipboard/></div></Button>
|
|
</div>
|
|
</div>
|
|
|
|
{#if error}
|
|
<div class="center">
|
|
<div id="error">
|
|
<div style="width: 16px; height: 16px; display: inline-block;"><IoMdAlert/></div>
|
|
{error}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !isLoaded}
|
|
<br><br><br>
|
|
<Loading/>
|
|
{/if}
|
|
</div> |