made the Codeblock copying option more accessible

Author: 0l1v3rr

client/src/App.tsx

@@ -2,48 +2,18 @@ import { useState } from "react";
 import Header from "./sections/Header";
 import Options from "./sections/Options";
 import Preview from "./sections/Preview";
-import { Line } from "./types/line";
 
 const App = () => {
-  const BASE_LINK = "https://github-readme-tech-stack.vercel.app/api/cards";
-  const [link, setLink] = useState<string>(BASE_LINK);
-
-  const generateLink = (
-    title: string,
-    lineCount: string,
-    theme: string,
-    align: string,
-    lines: Line[]
-  ): string => {
-    title = title.replace(/[ ]/g, "%20");
-    let res = `${BASE_LINK}?title=${title}&lineCount=${lineCount}&theme=${theme}&align=${align}`;
-
-    for (const l of lines) {
-      if (l.badges.length < 1) {
-        continue;
-      }
-
-      let line = `&line${l.lineNumber}=`;
-      for (const b of l.badges) {
-        const color = b.color.replace("#", "");
-        line += `${b.iconName},${b.label},${color};`;
-      }
-
-      res += line;
-    }
-
-    return res;
-  };
+  const [link, setLink] = useState<string>(
+    "https://github-readme-tech-stack.vercel.app/api/cards"
+  );
 
   return (
     <div className="bg-gh-bg w-screen min-h-screen overflow-x-hidden select-none pb-5">
       <Header />
 
       <div className="flex gap-4 mx-10 md:mx-48 mt-6 flex-col lg:flex-row">
-        <Options
-          generateLink={generateLink}
-          setLink={(link: string) => setLink(link)}
-        />
+        <Options setLink={(link: string) => setLink(link)} />
         <Preview link={link} />
       </div>
     </div>

client/src/components/input/LineInput.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from "react";
 import { Badge, Line } from "../../types/line";
-import { AiOutlinePlusCircle } from "react-icons/ai";
+import { AiOutlinePlus } from "react-icons/ai";
 import BlurOverlay from "../popups/BlurOverlay";
 import LinePopup from "../popups/LinePopup";
 
@@ -49,12 +49,11 @@ const LineInput: FC<InputProps> = (props) => {
 
         <button
           type="button"
-          title="Edit Line"
           className="cursor-pointer ml-auto text-gh-text-secondary 
             hover:text-gh-blue transition-all duration-150"
           onClick={() => setIsPopupOpen(true)}
         >
-          <AiOutlinePlusCircle />
+          <AiOutlinePlus />
         </button>
       </div>
     </div>

client/src/components/text/Codeblock.tsx

@@ -1,27 +1,35 @@
 import { FC, useState } from "react";
-import { MdContentCopy } from "react-icons/md";
+import { MdContentCopy, MdCheck } from "react-icons/md";
 
 interface CodeblockProps {
   code: string;
 }
 
 const Codeblock: FC<CodeblockProps> = (props) => {
   const [hovered, setHovered] = useState<boolean>(false);
+  const [clicked, setClicked] = useState<boolean>(false);
 
   return (
     <div className="relative">
       <button
         type="button"
         onMouseEnter={() => setHovered(true)}
-        onClick={() => navigator.clipboard.writeText(props.code)}
+        onClick={() => {
+          navigator.clipboard.writeText(props.code);
+          setClicked(true);
+        }}
+        onMouseLeave={() => setClicked(false)}
         className={`absolute top-1/3 right-5 bg-gh-bg-secondary
-          border border-solid border-gh-button-border cursor-pointer
-          transition-all duration-75 p-2 -translate-y-1/2 text-base rounded-md
-          text-gh-text-secondary hover:border-gh-button-border-active
-          hover:bg-gh-button shadow-xl z-10
-          ${hovered ? "scale-100 opacity-100" : "scale-75 opacity-0"}`}
+          border border-solid cursor-pointer -translate-y-1/2 text-base rounded-md
+          hover:bg-gh-button shadow-xl z-10 transition-all duration-75 p-2 
+          ${hovered ? "scale-100 opacity-100" : "scale-75 opacity-0"}
+          ${
+            clicked
+              ? "border-gh-green-active hover:border-gh-green-active text-gh-green-active"
+              : "border-gh-button-border hover:border-gh-button-border-active text-gh-text-secondary "
+          }`}
       >
-        <MdContentCopy />
+        {clicked ? <MdCheck /> : <MdContentCopy />}
       </button>
 
       <div

client/src/sections/Options.tsx

@@ -16,20 +16,14 @@ import { FC, useCallback, useEffect, useState } from "react";
 import LineInput from "../components/input/LineInput";
 import { Line } from "../types/line";
 import axios from "axios";
+import { generateLink } from "../utils/generate";
 
 interface OptionsProps {
-  generateLink: (
-    title: string,
-    lineCount: string,
-    theme: string,
-    align: string,
-    lines: Line[]
-  ) => string;
   setLink: (link: string) => void;
 }
 
 const Options: FC<OptionsProps> = (props) => {
-  const [themes, setThemes] = useState<string[]>([]);
+  const [themes, setThemes] = useState<string[]>(["github", "github_dark"]);
 
   useEffect(() => {
     axios
@@ -131,9 +125,7 @@ const Options: FC<OptionsProps> = (props) => {
         <GreenButton
           icon={IoHammerOutline}
           onClick={() => {
-            props.setLink(
-              props.generateLink(title, lineCount, theme, align, lines)
-            );
+            props.setLink(generateLink(title, lineCount, theme, align, lines));
           }}
           text="Generate"
         />

client/src/utils/generate.ts

@@ -0,0 +1,31 @@
+import { Line } from "../types/line";
+
+export const generateLink = (
+  title: string,
+  lineCount: string,
+  theme: string,
+  align: string,
+  lines: Line[]
+): string => {
+  // replace every space with %20
+  title = title.replace(/[ ]/g, "%20");
+
+  let res = `https://github-readme-tech-stack.vercel.app/api/cards?title=${title}&lineCount=${lineCount}&theme=${theme}&align=${align}`;
+
+  for (const l of lines) {
+    // if the line doesn't contain badges
+    if (l.badges.length < 1) {
+      continue;
+    }
+
+    let line = `&line${l.lineNumber}=`;
+    for (const b of l.badges) {
+      const color = b.color.replace("#", "");
+      line += `${b.iconName},${b.label},${color};`;
+    }
+
+    res += line;
+  }
+
+  return res;
+};