ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Copy to Clipboard Functionality Added on Landing Page (#128)

Browse source
This commit is contained in:
Mukesh Singh 2022-10-22 23:08:18 +05:30 committed by GitHub
parent 052ab3bdb3
commit d235fb7552
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/landing-page/src/components/copynpm.astro
View file

@ -4,8 +4,9 @@ import { Icon } from "astro-icon";
<button
class="copy-btn flex items-center w-4/5 mt-3 justify-center astro-md:w-1/2 astro-lg:w-[28%] astro-lg:mt-0 astro-lg:ml-3"
id="copy-command-button"
>
<span>npm install @astro-reactive/form @astro-reactive/validator</span>
<span id="command">npm install @astro-reactive/form @astro-reactive/validator</span>
<Icon name="mdi:content-copy" width="40px" height="40px" />
</button>
@ -32,3 +33,12 @@ import { Icon } from "astro-icon";
background-color: #3f3f3f;
}
</style>
<script>
const copyCommandButton = document.getElementById("copy-command-button");
const commandText = document.getElementById('command').innerText;
copyCommandButton.addEventListener('click', () => {
navigator.clipboard.writeText(commandText);
});
</script>