adding copy code to code samples in rest docs (github#26043)

Author: gracepark

components/rest/CodeBlock.tsx

@@ -1,24 +1,68 @@
 import cx from 'classnames'
+import { CheckIcon, CopyIcon } from '@primer/octicons-react'
+import { Tooltip } from '@primer/react'
+
+import useClipboard from 'components/hooks/useClipboard'
 
 import styles from './CodeBlock.module.scss'
 
 type Props = {
   verb?: string
+  headingLang?: string
   codeBlock: string
   highlight?: string
 }
 
-export function CodeBlock({ verb, codeBlock, highlight }: Props) {
+export function CodeBlock({ verb, headingLang, codeBlock, highlight }: Props) {
+  const [isCopied, setCopied] = useClipboard(codeBlock, {
+    successDuration: 1400,
+  })
+
   return (
-    <pre className={cx(styles.methodCodeBlock, 'rounded-1 border')} data-highlight={highlight}>
-      <code>
-        {verb && (
-          <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 text-uppercase">
-            {verb}
-          </span>
-        )}{' '}
-        {codeBlock}
-      </code>
-    </pre>
+    <div className="code-extra">
+      {headingLang && (
+        <header className="d-flex flex-justify-between flex-items-center p-2 text-small rounded-top-1 border">
+          {headingLang === 'JavaScript' ? (
+            <span>
+              {headingLang} (
+              <a className="text-underline" href="https://github.com/octokit/core.js#readme">
+                @octokit/core.js
+              </a>
+              )
+            </span>
+          ) : (
+            `${headingLang}`
+          )}
+          <Tooltip direction="w" aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}>
+            <button className="btn-octicon" onClick={() => setCopied()}>
+              {isCopied ? <CheckIcon /> : <CopyIcon />}
+            </button>
+          </Tooltip>
+        </header>
+      )}
+      <pre
+        className={cx(
+          styles.methodCodeBlock,
+          'd-flex flex-justify-between flex-items-center rounded-1 border'
+        )}
+        data-highlight={highlight}
+      >
+        <code>
+          {verb && (
+            <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 text-uppercase">
+              {verb}
+            </span>
+          )}{' '}
+          {codeBlock}
+        </code>
+        {!headingLang && (
+          <Tooltip direction="w" aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}>
+            <button className="btn-octicon" onClick={() => setCopied()}>
+              {isCopied ? <CheckIcon /> : <CopyIcon />}
+            </button>
+          </Tooltip>
+        )}
+      </pre>
+    </div>
   )
 }

components/rest/RestCodeSamples.tsx

@@ -18,22 +18,10 @@ export function RestCodeSamples({ slug, xCodeSamples }: Props) {
       {xCodeSamples.map((sample, index) => {
         const sampleElements: JSX.Element[] = []
         if (sample.lang !== 'Ruby') {
-          sampleElements.push(
-            sample.lang === 'JavaScript' ? (
-              <h5 key={`${sample.lang}-${index}`}>
-                {sample.lang} (
-                <a className="text-underline" href="https://github.com/octokit/core.js#readme">
-                  @octokit/core.js
-                </a>
-                )
-              </h5>
-            ) : (
-              <h5 key={`${sample.lang}-${index}`}>{sample.lang}</h5>
-            )
-          )
           sampleElements.push(
             <CodeBlock
               key={sample.lang + index}
+              headingLang={sample.lang}
               codeBlock={sample.source}
               highlight={sample.lang === 'JavaScript' ? 'javascript' : 'curl'}
             ></CodeBlock>