feat: 🎸 Copy button for format Text & JSON (#99)

* feat: 🎸 Copy buton for format Text & JSON

✅ Closes: #98

* chore: restored .env.example

* fix: 🐛 build fails

Change use write() to writeText() to copy String to clipboard

✅ Closes: #99

---------

Co-authored-by: Leonardo Montini <[email protected]>

Author: K1ethoang

src/pages/stats/[login].tsx

@@ -6,6 +6,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
 import CardSkeleton from "@/components/CardSkeleton";
+import { toast } from "react-toastify";
 
 const yearsRange = 4;
 
@@ -126,6 +127,22 @@ export default function Stats() {
     return text;
   }
 
+  const copyToClipboard = (format: "text" | "json") => {
+    let data = null;
+
+    if (format === "text") data = generateText();
+    else data = JSON.stringify(repositories, null, 2);
+
+    navigator.clipboard
+      .writeText(data)
+      .then(() => {
+        toast.success(`${format} copied to clipboard`);
+      })
+      .catch(() => {
+        toast.error(`Failed to copy ${format} to clipboard`);
+      });
+  };
+
   const formatRender = useMemo(() => {
     switch (format) {
       case "cards":
@@ -185,6 +202,12 @@ export default function Stats() {
             >
               Export as JSON
             </button>
+            <button
+              className="btn btn-primary p-2 m-1 rounded"
+              onClick={() => copyToClipboard("json")}
+            >
+              Copy
+            </button>
             <div className="p-2 m-1 text-xs overflow-x-auto sm:text-sm md:text-base lg:text-lg">
               <pre>{JSON.stringify(filteredRepositories, null, 2)}</pre>
             </div>
@@ -199,6 +222,12 @@ export default function Stats() {
             >
               Export as Text
             </button>
+            <button
+              className="btn btn-primary p-2 m-1 rounded"
+              onClick={() => copyToClipboard("text")}
+            >
+              Copy
+            </button>
             <div className="p-2 m-1 text-xs overflow-x-auto sm:text-sm md:text-base lg:text-lg">
               <pre>{generateText()}</pre>
             </div>