Feature/code block copy

[jmfulgham]

Add copy functionality to code blocks on hover.

[andyrichardson]

Oversight on my part - we probably want the "copied" text to last for N seconds following the last click (which won't work with the current approach.

To get around this, we could either store the copied state in an object (allowing us to know when a subsequent copy has taken place thanks to the referential update)

const copied = useState({ state: true });

useEffect(() => {
 // ...
}, [copied])

Here's a sandbox example comparing the two.

Or if you prefer, we could implement a debounced "clearCopiedState" function - this is a little more explicit but takes more work so might be easier to avoid.

// Somewhere in utils
export const debounce = <T extends Function>(fn: T, delay: number): T => {
  let timeout;
  (...args: Parameters<T>) => {
    if (timeout) {
      clearTimeout(timeout);
    }

    timeout = setTimeout(() => fn(...args), delay);
  }
});

// In component
const clearCopiedState = useCallback(() => debounce(() => setCopied(false), 1000), []);

// ...
setCopied(true);
clearCopiedState();