From 29c8c870b7ccb5c3c9a4a3099edd1b45c23263fc Mon Sep 17 00:00:00 2001
From: Lalit <lalitkumarsingh3716@gmail.com>
Date: Fri, 2 Dec 2022 19:23:16 +0530
Subject: [PATCH] style(landing-page): Displaying toast on clicking copy button
 (#222)

---
 .../landing-page/src/components/copynpm.astro | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/apps/landing-page/src/components/copynpm.astro b/apps/landing-page/src/components/copynpm.astro
index 571b20d..786809f 100644
--- a/apps/landing-page/src/components/copynpm.astro
+++ b/apps/landing-page/src/components/copynpm.astro
@@ -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>