forked from didirus/AstralRinth
46 lines
820 B
Svelte
46 lines
820 B
Svelte
<script lang="ts">
|
|
import IconClipboardCopy from 'virtual:icons/heroicons-outline/clipboard-copy'
|
|
import IconCheck from 'virtual:icons/heroicons-outline/check'
|
|
|
|
export let text: string
|
|
|
|
let copied = false
|
|
</script>
|
|
|
|
<button
|
|
class="code"
|
|
class:copied
|
|
title="Copy code to clipboard"
|
|
on:click={async () => {
|
|
await navigator.clipboard.writeText(text)
|
|
copied = true
|
|
}}>
|
|
{text}
|
|
{#if copied}
|
|
<IconCheck />
|
|
{:else}
|
|
<IconClipboardCopy />
|
|
{/if}
|
|
</button>
|
|
|
|
<style lang="postcss">
|
|
.code {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
font-family: var(--mono-font);
|
|
padding: 0.25rem 0.5rem;
|
|
background-color: var(--color-code-bg);
|
|
width: min-content;
|
|
border-radius: var(--rounded-sm);
|
|
user-select: text;
|
|
|
|
&.copied {
|
|
cursor: default;
|
|
}
|
|
|
|
&:hover:not(.copied) {
|
|
filter: brightness(0.9);
|
|
}
|
|
}
|
|
</style>
|