Add copy / playground button to CodeExample component

Author: ryyppy

src/components/CodeExample.js

@@ -8,6 +8,89 @@ let langShortname = (lang: string) =>
   | rest => rest
   }
 
+module LzString = {
+  @bs.module("lz-string")
+  external compressToEncodedURIComponent: string => string = "compressToEncodedURIComponent"
+}
+
+module CopyButton = {
+  let copyToClipboard: string => bool = %raw(j`
+  function(str) {
+    try {
+      const el = document.createElement('textarea');
+      el.value = str;
+      el.setAttribute('readonly', '');
+      el.style.position = 'absolute';
+      el.style.left = '-9999px';
+      document.body.appendChild(el);
+      const selected =
+        document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+        if (selected) {
+          document.getSelection().removeAllRanges();
+          document.getSelection().addRange(selected);
+        }
+        return true;
+      } catch(e) {
+        return false;
+      }
+    }
+    `)
+
+  type state =
+    | Init
+    | Copied
+    | Failed
+
+  @react.component
+  let make = (~code) => {
+    let (state, setState) = React.useState(_ => Init)
+
+    let onClick = evt => {
+      ReactEvent.Mouse.preventDefault(evt)
+      if copyToClipboard(code) {
+        setState(_ => Copied)
+      } else {
+        setState(_ => Failed)
+      }
+    }
+
+    React.useEffect1(() => {
+      switch state {
+      | Copied =>
+        let timeoutId = Js.Global.setTimeout(() => {
+          setState(_ => Init)
+        }, 2000)
+
+        Some(
+          () => {
+            Js.Global.clearTimeout(timeoutId)
+          },
+        )
+      | _ => None
+      }
+    }, [state])
+
+    let activeClass = switch state {
+    | Copied => "opacity-100"
+    | _ => "opacity-0 hidden"
+    }
+
+    let banner =
+      <div
+        className={"absolute top-0 -mt-1 -mr-1 px-2 rounded right-0 bg-turtle text-gray-80-tr transition-all duration-500 ease-in-out " ++
+        activeClass}>
+        {React.string("Copied!")}
+      </div>
+
+    <button disabled={state === Copied} className="relative" onClick>
+      banner <Icon.Copy className="text-gray-20 mt-px hover:cursor-pointer hover:text-gray-80" />
+    </button>
+  }
+}
+
 @react.component
 let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text") => {
   let children = HighlightJs.renderHLJS(~highlightedLines, ~code, ~lang, ())
@@ -62,9 +145,9 @@ module Toggle = {
         }
 
         let activeClass = if selected === i {
-          "font-medium text-gray-90 bg-gray-5 border-t-2 border-l border-r"
+          "font-medium text-gray-90 bg-gray-5 border-t-2 first:border-l"
         } else {
-          "font-medium hover:text-gray-60 border-t-2 border-l border-r bg-gray-10 hover:cursor-pointer"
+          "font-medium hover:text-gray-60 border-t-2 bg-gray-10 hover:cursor-pointer"
         }
 
         let onClick = evt => {
@@ -83,14 +166,14 @@ module Toggle = {
         let borderColor = if selected === i {
           "#f4646a #EDF0F2"
         } else {
-          "#CDCDD6 #EDF0F2"
+          "transparent"
         }
 
         <span
           key
           style={ReactDOM.Style.make(~borderColor, ())}
           className={paddingX ++
-          (" flex-none px-4 first:ml-6 xs:first:ml-0 inline-block p-1 rounded-tl rounded-tr " ++
+          (" flex-none px-4 inline-block p-1 first:rounded-tl " ++
           activeClass)}
           onClick>
           {React.string(label)}
@@ -105,13 +188,38 @@ module Toggle = {
         })
         ->Belt.Option.getWithDefault(React.null)
 
+      let buttonDiv = switch Js.Array2.find(multiple, tab => {
+        switch tab.lang {
+        | Some("res") | Some("rescript") => true
+        | _ => false
+        }
+      }) {
+      | Some({code: ""}) => React.null
+      | Some(tab) =>
+        let playgroundLinkButton =
+          <Next.Link href={`/try?code=${LzString.compressToEncodedURIComponent(tab.code)}}`}>
+            <a target="_blank">
+              <Icon.ExternalLink className="text-gray-20 hover:cursor-pointer hover:text-gray-80" />
+            </a>
+          </Next.Link>
+
+        let copyButton = <CopyButton code={tab.code} />
+
+        <div className="flex items-center justify-end h-full pr-4 space-x-3">
+          playgroundLinkButton copyButton
+        </div>
+      | None => React.null
+      }
+
       <div className="relative pt-6 w-full rounded-none text-gray-80">
         //text within code-box
         <div
           className="absolute flex w-full overflow-auto scrolling-touch font-sans bg-transparent text-14 text-gray-40 "
           style={ReactDOM.Style.make(~marginTop="-30px", ())}>
-          <div className="flex space-x-1"> {React.array(tabElements)} </div>
-          <div className="flex-1 border-b border-gray-10"> {React.string(j`\\u00A0`)} </div>
+          <div className="flex ml-2 xs:ml-0"> {React.array(tabElements)} </div>
+          <div className="flex-1 w-full bg-gray-10 border-b rounded-tr border-gray-10 items-center">
+            buttonDiv
+          </div>
         </div>
         <div
           className="px-4 lg:px-5 text-14 pb-4 pt-4 overflow-x-auto bg-gray-5 border-gray-10 xs:rounded-b-lg border">