docs/src/components/Examples/Codebar.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import type { FunctionalComponent } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useRef, useEffect } from 'preact/hooks';

export type CodeBar = {
  content: string;
  command: string;
};

const CodeBar: FunctionalComponent = ({ content, command }) => {
  const [clicked, setClicked] = useState(false);
  const [titleTxt, setTitleTxt] = useState('Copy Command to Clipboard');
  useEffect(() => {
    const timeout = setTimeout(() => {
      setClicked(false);
      setTitleTxt('Copy Command to Clipboard');
    }, 1500);
    return () => clearTimeout(timeout);
  }, [clicked]);
  /**
   *
   */
  function onClick(e) {
    setClicked(true);
    setTitleTxt('Copied to Clipboard!');
    const titleAttr = e.target;
    const clipboard = navigator.clipboard;
    return clipboard.writeText(`${command}`);
  }

  return (
    <div style="cursor:pointer;" onClick={onClick} title={titleTxt}>
      <code>{content}</code>
    </div>
  );
};

export default CodeBar;