mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-11 05:13:02 -05:00
102 lines
2.8 KiB
Plaintext
102 lines
2.8 KiB
Plaintext
---
|
|
const { copyText } = Astro.props;
|
|
---
|
|
|
|
<span class="copy-container">
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
role="img"
|
|
class="copy-button"
|
|
viewBox="0 0 16 16"
|
|
width="16"
|
|
height="16"
|
|
style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible;"
|
|
fill="currentColor"
|
|
><path
|
|
d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
|
|
></path><path
|
|
d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
|
|
></path></svg
|
|
>
|
|
<svg
|
|
style="display:none;user-select:none;vertical-align:text-bottom;overflow:visible;"
|
|
aria-hidden="true"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
version="1.1"
|
|
width="16"
|
|
data-view-component="true"
|
|
class="copied-checkmark"
|
|
><path
|
|
d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
|
|
></path></svg
|
|
>
|
|
<span class="tooltipText triangle">Copied!</span>
|
|
</span>
|
|
|
|
<script define:vars={{ copyText }}>
|
|
const commandCopyBtn = document.querySelector('.copy-button');
|
|
const copiedCheckMark = document.querySelector('.copied-checkmark');
|
|
const tooltipText = document.querySelector('.tooltipText');
|
|
|
|
commandCopyBtn.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(copyText);
|
|
tooltipText.style.display = 'block';
|
|
copiedCheckMark.style.display = 'inline-block';
|
|
commandCopyBtn.style.display = 'none';
|
|
|
|
setTimeout(()=>{
|
|
copiedCheckMark.style.display = 'none';
|
|
commandCopyBtn.style.display = 'inline-block';
|
|
tooltipText.style.display = 'none';
|
|
}, 2000)
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.copy-button {
|
|
margin-left: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.copy-button:hover{
|
|
fill: var(--sl-color-accent-high);
|
|
}
|
|
|
|
.copied-checkmark {
|
|
fill: var(--sl-color-green);
|
|
margin-left: 0.5rem;
|
|
display: none;
|
|
}
|
|
|
|
.copy-container {
|
|
position: relative;
|
|
}
|
|
|
|
.tooltipText {
|
|
position: absolute;
|
|
left: -14px;
|
|
width: max-content;
|
|
background-color: var(--sl-color-accent-high);
|
|
color: white;
|
|
display: none;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
top: 200%;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.triangle:before {
|
|
content: "";
|
|
width: 0px;
|
|
height: 0px;
|
|
position: absolute;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-bottom: 8px solid var(--sl-color-accent-high);
|
|
right: 28px;
|
|
top : -7px;
|
|
}
|
|
</style>
|