Add share button and relocate copy button

Author: technoph1le

CONTRIBUTING.md

@@ -161,8 +161,8 @@ Expected file structure:
 ```md
 /snippets
 |- language
-   |- category-name
-      |- your-snippet-here.md
+|- category-name
+|- your-snippet-here.md
 ```
 
 > Please do **NOT** add or edit anything in `/public` folder. It will be used for consolidating snippets.
@@ -221,9 +221,9 @@ Example structure:
 ```md
 /snippets
 |- python
-   |- file-handling
-   |- list-manipulation
-   |- ....
+|- file-handling
+|- list-manipulation
+|- ....
 ```
 
 ### Adding a New Language

src/components/CodePreview.tsx

@@ -5,14 +5,18 @@ import {
   oneLight,
 } from "react-syntax-highlighter/dist/esm/styles/prism";
 
+import { slugify } from "@utils/slugify";
+
 import CopyToClipboard from "./CopyToClipboard";
+import CopyURLButton from "./CopyURLButton";
 
 type Props = {
-  language: string;
+  extension: string;
+  languageName: string;
   code: string;
 };
 
-const CodePreview = ({ language = "markdown", code }: Props) => {
+const CodePreview = ({ extension = "markdown", languageName, code }: Props) => {
   const [theme, setTheme] = useState<"dark" | "light">("dark");
 
   useEffect(() => {
@@ -35,15 +39,23 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
 
   return (
     <div className="code-preview">
-      <CopyToClipboard text={code} className="modal__copy" />
-      <SyntaxHighlighter
-        language={language}
-        style={theme === "dark" ? oneDark : oneLight}
-        wrapLines={true}
-        customStyle={{ margin: "0", maxHeight: "32rem" }}
-      >
-        {code}
-      </SyntaxHighlighter>
+      <div className="code-preview__header">
+        <p>{slugify(languageName)}</p>
+        <div className="code-preview__buttons">
+          <CopyToClipboard text={code} />
+          <CopyURLButton />
+        </div>
+      </div>
+      <div className="code-preview__body">
+        <SyntaxHighlighter
+          language={extension}
+          style={theme === "dark" ? oneDark : oneLight}
+          wrapLines={true}
+          customStyle={{ margin: "0", maxHeight: "32rem" }}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
     </div>
   );
 };

src/components/CopyToClipboard.tsx

@@ -22,7 +22,8 @@ const CopyToClipboard = ({ text, ...props }: Props) => {
 
   return (
     <Button isIcon={true} onClick={copyText} {...props}>
-      {isCopied ? "Copied!" : <CopyIcon />}
+      <CopyIcon />
+      <span>{isCopied ? "Copied!" : "Copy"}</span>
     </Button>
   );
 };

src/components/CopyURLButton.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+
+import Button from "./Button";
+import { ShareIcon } from "./Icons";
+
+type Props = {} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const CopyURLButton = ({ ...props }: Props) => {
+  const location = useLocation();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyText = () => {
+    const fullURL =
+      window.location.origin + location.pathname + location.search;
+    navigator.clipboard
+      .writeText(fullURL)
+      .then(() => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      })
+      .catch((err) => alert("Error occurred: " + err));
+  };
+
+  return (
+    <Button isIcon={true} onClick={copyText} {...props}>
+      <ShareIcon />
+      <span>{isCopied ? "Shared!" : "Share"}</span>
+    </Button>
+  );
+};
+
+export default CopyURLButton;

src/components/Icons.tsx

@@ -157,6 +157,21 @@ export const CopyIcon: FC<IconProps> = ({ fillColor = ACCENT_ICON_COLOR }) => (
   </svg>
 );
 
+export const ShareIcon: FC<IconProps> = ({ fillColor = ACCENT_ICON_COLOR }) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.9167 3.75C17.9168 4.3204 17.7497 4.87833 17.436 5.35474C17.1224 5.83115 16.6759 6.20513 16.1518 6.43039C15.6278 6.65565 15.0492 6.72231 14.4877 6.62211C13.9261 6.52191 13.4063 6.25926 12.9925 5.86666L7.00416 9.32333C7.11027 9.7682 7.11027 10.2318 7.00416 10.6767L12.9925 14.1342C13.501 13.6522 14.166 13.3694 14.8659 13.3375C15.5657 13.3056 16.2537 13.5266 16.804 13.9602C17.3543 14.3938 17.7301 15.011 17.8628 15.6989C17.9954 16.3869 17.876 17.0996 17.5264 17.7067C17.1767 18.3138 16.6202 18.7748 15.9587 19.0053C15.2971 19.2359 14.5746 19.2206 13.9234 18.9623C13.2722 18.704 12.7357 18.2199 12.412 17.5985C12.0884 16.9771 11.9992 16.26 12.1608 15.5783L6.17 12.12C5.75586 12.5115 5.23611 12.773 4.67496 12.8724C4.11382 12.9718 3.53585 12.9046 3.01248 12.6791C2.4891 12.4536 2.04323 12.0798 1.72997 11.6037C1.4167 11.1277 1.24976 10.5703 1.24976 10.0004C1.24976 9.43053 1.4167 8.87314 1.72997 8.39709C2.04323 7.92104 2.4891 7.54719 3.01248 7.32173C3.53585 7.09626 4.11382 7.02906 4.67496 7.12842C5.23611 7.22778 5.75586 7.48936 6.17 7.88083L12.1617 4.42166C12.0669 4.02118 12.058 3.60518 12.1355 3.20101C12.213 2.79683 12.3752 2.41364 12.6113 2.0766C12.8474 1.73956 13.1522 1.45631 13.5057 1.24546C13.8591 1.03461 14.2531 0.900943 14.6619 0.853236C15.0706 0.80553 15.4849 0.844866 15.8774 0.968659C16.2698 1.09245 16.6317 1.2979 16.9391 1.5715C17.2465 1.8451 17.4925 2.18066 17.661 2.55612C17.8295 2.93159 17.9166 3.33846 17.9167 3.75Z"
+      fill={fillColor}
+    />
+  </svg>
+);
+
 export const LeftAngleArrowIcon: FC<IconProps> = ({
   fillColor = ACCENT_ICON_COLOR,
 }) => (

src/components/SnippetList.tsx

@@ -130,7 +130,7 @@ const SnippetList = () => {
           <SnippetModal
             snippet={snippet}
             handleCloseModal={handleCloseModal}
-            language={snippet.extension}
+            extension={snippet.extension}
           />
         )}
       </AnimatePresence>

src/components/SnippetModal.tsx

@@ -2,27 +2,28 @@ import { motion, useReducedMotion } from "motion/react";
 import React from "react";
 import ReactDOM from "react-dom";
 
+import { useAppContext } from "@contexts/AppContext";
 import { useEscapeKey } from "@hooks/useEscapeKey";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/slugify";
 
 import Button from "./Button";
 import CodePreview from "./CodePreview";
 import { CloseIcon } from "./Icons";
 
 type Props = {
   snippet: SnippetType;
-  language: string;
+  extension: string;
   handleCloseModal: () => void;
 };
 
 const SnippetModal: React.FC<Props> = ({
   snippet,
-  language,
+  extension,
   handleCloseModal,
 }) => {
   const modalRoot = document.getElementById("modal-root");
 
+  const { language, subLanguage } = useAppContext();
   const shouldReduceMotion = useReducedMotion();
 
   useEscapeKey(handleCloseModal);
@@ -49,7 +50,7 @@ const SnippetModal: React.FC<Props> = ({
         key="modal-content"
         className="modal | flow"
         data-flow-space="lg"
-        layoutId={`${language}-${snippet.title}`}
+        layoutId={`${extension}-${snippet.title}`}
         transition={{
           ease: [0, 0.75, 0.25, 1],
           duration: shouldReduceMotion ? 0 : 0.3,
@@ -62,7 +63,14 @@ const SnippetModal: React.FC<Props> = ({
           </Button>
         </div>
         <div className="modal__body | flow">
-          <CodePreview language={slugify(language)} code={snippet.code} />
+          {/* TODO: update the language name and remove all-sub-languages */}
+          <CodePreview
+            languageName={
+              subLanguage === "all-sub-languages" ? language.name : subLanguage
+            }
+            extension={extension}
+            code={snippet.code}
+          />
           <p>
             <b>Description: </b>
             {snippet.description}

src/styles/main.css

@@ -297,6 +297,7 @@ abbr {
 .button--icon {
   min-height: unset;
   display: inline-flex;
+  gap: 0.35em;
   align-items: center;
   justify-content: center;
   background-color: transparent;
@@ -490,11 +491,6 @@ abbr {
   transform: rotate(-90deg);
   transition: transform 100ms ease;
   cursor: pointer;
-  transition: all 200ms ease;
-}
-
-.sublanguage__arrow:hover {
-  border-top-color: var(--clr-accent);
 }
 
 [aria-expanded="true"] .sublanguage__arrow {
@@ -505,10 +501,6 @@ abbr {
   border-top-color: var(--clr-text-tertiary);
 }
 
-.selector__item.selected .sublanguage__arrow:hover {
-  border-top-color: var(--clr-text-primary);
-}
-
 .selector__item label {
   width: 100%;
   padding: 0.25em 0.75em;
@@ -763,22 +755,26 @@ body:has(.modal-overlay) {
   border: 1px solid var(--clr-border-primary);
   border-radius: var(--br-md);
   width: 100%;
-  overflow-x: auto;
+  overflow: hidden;
   position: relative;
 }
 
-.modal__copy {
-  position: absolute;
-  top: 0.5em;
-  right: 1.2em;
-  z-index: 10;
-  isolation: isolate;
-  background-color: var(--clr-bg-secondary);
-  border: 1px solid var(--clr-border-primary);
+.code-preview__header {
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25em 1em;
 }
 
-.modal__copy:hover {
-  background-color: var(--clr-bg-primary);
+.code-preview__body {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.code-preview__buttons {
+  display: flex;
+  gap: 0.5em;
 }
 
 .modal__tags {