40 lines
1.1 KiB
Plaintext
40 lines
1.1 KiB
Plaintext
---
|
|
interface Props {
|
|
code: string;
|
|
index: number;
|
|
}
|
|
const { code, index } = Astro.props;
|
|
---
|
|
|
|
<div class="gift-card" style={`animation-delay: ${index * 80}ms`}>
|
|
<div>
|
|
<p class="gift-card-label">Gift code {index + 1}</p>
|
|
<p class="gift-card-code">{code}</p>
|
|
</div>
|
|
<button class="copy-btn" data-code={code} aria-label={`Copy code ${code}`}
|
|
>Copy</button
|
|
>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll<HTMLButtonElement>(".copy-btn").forEach((btn) => {
|
|
btn.addEventListener("click", async () => {
|
|
const code = btn.dataset.code ?? "";
|
|
try {
|
|
await navigator.clipboard.writeText(code);
|
|
btn.textContent = "Copied";
|
|
btn.classList.add("copied");
|
|
setTimeout(() => {
|
|
btn.textContent = "Copy";
|
|
btn.classList.remove("copied");
|
|
}, 2000);
|
|
} catch {
|
|
btn.textContent = "Error";
|
|
setTimeout(() => {
|
|
btn.textContent = "Copy";
|
|
}, 2000);
|
|
}
|
|
});
|
|
});
|
|
</script>
|