blob: 0aae0bbb614d992f3208fd446dda468cf8d22c18 (
plain)
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
import hljs from "highlight.js";
import { useEffect, useState } from "react";
import styled from "styled-components";
import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
import { Clipboard, CheckCircle } from "@styled-icons/heroicons-outline";
const StyledPre = styled.pre`
overflow-y: scroll;
word-wrap: normal;
border: 0.5px solid gray;
border-radius: ${defaultBorderRadius};
background-color: ${secondaryDark};
padding: 8px;
padding-top: 14px;
padding-bottom: 16px;
`;
const StyledCode = styled.code``;
const StyledCopyButton = styled.button<{ visible: boolean }>`
/* position: relative; */
float: right;
border: none;
background-color: ${secondaryDark};
cursor: pointer;
padding: 0;
/* margin: 4px; */
margin-top: -6px;
visibility: ${(props) => (props.visible ? "visible" : "hidden")};
`;
function CopyButton(props: { textToCopy: string; visible: boolean }) {
const [hovered, setHovered] = useState<boolean>(false);
const [clicked, setClicked] = useState<boolean>(false);
return (
<>
<StyledCopyButton
onMouseEnter={() => {
setHovered(true);
}}
onMouseLeave={() => {
setHovered(false);
}}
visible={clicked || props.visible}
onClick={() => {
navigator.clipboard.writeText(props.textToCopy);
setClicked(true);
setTimeout(() => {
setClicked(false);
}, 2000);
}}
>
{clicked ? (
<CheckCircle color="#00ff00" size="1.4em" />
) : (
<Clipboard color={hovered ? "#00ff00" : "white"} size="1.4em" />
)}
</StyledCopyButton>
</>
);
}
function CodeBlock(props: { language?: string; children: string }) {
useEffect(() => {
hljs.highlightAll();
}, [props.children]);
const [hovered, setHovered] = useState<boolean>(false);
return (
<StyledPre
onMouseEnter={() => {
setHovered(true);
}}
onMouseLeave={() => {
setHovered(false);
}}
>
<CopyButton
visible={hovered}
textToCopy={(props.children as any).props.children[0]}
/>
<StyledCode>{props.children}</StyledCode>
</StyledPre>
);
}
export default CodeBlock;
|
