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

style(landing-page): Displaying toast on clicking copy button (#222)

Browse source
This commit is contained in:
Lalit 2022-12-02 19:23:16 +05:30 committed by GitHub
parent 26e099e2cf
commit 29c8c870b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,49 @@
import { Icon } from "astro-icon";
---
<div
id="toast-success"
class="items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 flex transition"
role="alert"
>
<div
class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ml-3 text-sm font-normal">Copied to clipboard!</div>
<button
type="button"
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
id="toast-close"
aria-label="Close"
>
<span class="sr-only">Close</span>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<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 max-w-md"
id="copy-command-button"
@ -34,13 +77,31 @@ import { Icon } from "astro-icon";
.copy-btn:hover {
background-color: #3f3f3f;
}
#toast-success {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
opacity: 0;
z-index: 999;
}
</style>
<script>
const copyCommandButton = document.getElementById("copy-command-button");
const commandText = document.getElementById("command").innerText;
const toastSuccess = document.getElementById("toast-success");
const toastClose = document.getElementById("toast-close");
copyCommandButton?.addEventListener("click", () => {
toastSuccess.style.transform = "translateX(-50%) translateY(0)";
toastSuccess.style.opacity = "1";
navigator.clipboard.writeText(commandText);
});
toastClose?.addEventListener("click", () => {
toastSuccess.style.transform = "translateX(-50%) translateY(100%)";
toastSuccess.style.opacity = "0";
});
</script>