From f9c8d330ff713ddcd28b7ffe9dd84588ff2275d1 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Tue, 2 Jul 2024 18:00:58 +0400
Subject: [PATCH] Fix ClipboardJS not defined

---
 src/components/ui/buttons/SocialShare.astro | 62 +++++++++++++--------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/components/ui/buttons/SocialShare.astro b/src/components/ui/buttons/SocialShare.astro
index 643b3ab..21f0db9 100644
--- a/src/components/ui/buttons/SocialShare.astro
+++ b/src/components/ui/buttons/SocialShare.astro
@@ -1,7 +1,10 @@
 ---
 import Icon from "@components/ui/icons/Icon.astro";
 // Destructure the properties from Astro.props
-const { pageTitle, title = Astro.currentLocale === "fr" ? "Partager" : "Share", } = Astro.props;
+const {
+  pageTitle,
+  title = Astro.currentLocale === "fr" ? "Partager" : "Share",
+} = Astro.props;
 
 // Define TypeScript interface for the properties
 interface Props {
@@ -88,7 +91,7 @@ const socialPlatforms: SocialPlatform[] = [
         </svg>
 
         <svg
-          class="js-clipboard-success text-neutral-700 dark:text-neutral-300 hidden h-4 w-4"
+          class="js-clipboard-success hidden h-4 w-4 text-neutral-700 dark:text-neutral-300"
           width="24"
           height="24"
           viewBox="0 0 24 24"
@@ -111,42 +114,55 @@ const socialPlatforms: SocialPlatform[] = [
 <!-- https://clipboardjs.com/ -->
 <script>
   import "@preline/dropdown/index.js";
-  import "clipboard/dist/clipboard.min.js";
 </script>
 
-<script is:inline>
+<script>
+  import ClipboardJS from "clipboard";
+
   // Initialization of Clipboard
   (function () {
     window.addEventListener("load", () => {
-      const $clipboards = document.querySelectorAll(".js-clipboard");
-      $clipboards.forEach((el) => {
+      const clipboards =
+        document.querySelectorAll<HTMLElement>(".js-clipboard");
+
+      clipboards.forEach((el) => {
         const clipboard = new ClipboardJS(el, {
           text: () => {
             return window.location.href;
           },
         });
+
         clipboard.on("success", () => {
-          const $default = el.querySelector(".js-clipboard-default");
-          const $success = el.querySelector(".js-clipboard-success");
-          const $successText = el.querySelector(".js-clipboard-success-text");
+          const defaultElement = el.querySelector<HTMLElement>(
+            ".js-clipboard-default"
+          );
+          const successElement = el.querySelector<HTMLElement>(
+            ".js-clipboard-success"
+          );
+          const successTextElement = el.querySelector<HTMLElement>(
+            ".js-clipboard-success-text"
+          );
           const successText = el.dataset.clipboardSuccessText || "";
-          let oldSuccessText;
+          let oldSuccessText: string | undefined;
 
-          if ($successText) {
-            oldSuccessText = $successText.textContent;
-            $successText.textContent = successText;
-          }
-          if ($default && $success) {
-            $default.style.display = "none";
-            $success.style.display = "block";
+          if (successTextElement) {
+            oldSuccessText = successTextElement.textContent || "";
+            successTextElement.textContent = successText;
           }
 
-          setTimeout(function () {
-            if ($successText && oldSuccessText)
-              $successText.textContent = oldSuccessText;
-            if ($default && $success) {
-              $success.style.display = "";
-              $default.style.display = "";
+          if (defaultElement && successElement) {
+            defaultElement.style.display = "none";
+            successElement.style.display = "block";
+          }
+
+          setTimeout(() => {
+            if (successTextElement && oldSuccessText !== undefined) {
+              successTextElement.textContent = oldSuccessText;
+            }
+
+            if (defaultElement && successElement) {
+              successElement.style.display = "";
+              defaultElement.style.display = "";
             }
           }, 800);
         });