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
39
40
41
42
43

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