mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02:00
64 lines
1.1 KiB
Plaintext
64 lines
1.1 KiB
Plaintext
|
---
|
||
|
import { Copy as CopyIcon } from '@images/components'
|
||
|
|
||
|
type Props = {
|
||
|
text: string
|
||
|
}
|
||
|
|
||
|
const { text } = Astro.props as Props
|
||
|
---
|
||
|
|
||
|
<button-copy>
|
||
|
<button class="button" title="Copy to clipboard" data-text={text}>
|
||
|
<CopyIcon />
|
||
|
</button>
|
||
|
</button-copy>
|
||
|
|
||
|
<script>
|
||
|
class ButtonCopy extends HTMLElement {
|
||
|
constructor() {
|
||
|
super()
|
||
|
const button = this.querySelector('button')
|
||
|
const text = button?.dataset.text
|
||
|
|
||
|
button?.addEventListener('click', () => {
|
||
|
if (text && navigator?.clipboard) {
|
||
|
navigator.clipboard.writeText(text)
|
||
|
button?.classList.add('copied')
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
|
||
|
customElements.define('button-copy', ButtonCopy)
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.button {
|
||
|
padding: calc(var(--spacer) / 3);
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.button svg {
|
||
|
stroke: var(--text-color-light);
|
||
|
transition: 0.15s ease-out;
|
||
|
}
|
||
|
|
||
|
.copied {
|
||
|
background: green;
|
||
|
}
|
||
|
|
||
|
.copied svg {
|
||
|
stroke: var(--text-color-dimmed);
|
||
|
}
|
||
|
|
||
|
.button:hover svg {
|
||
|
stroke: var(--text-color-dimmed);
|
||
|
}
|
||
|
</style>
|