50 lines
No EOL
1.5 KiB
JavaScript
50 lines
No EOL
1.5 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
|
|
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
|
|
// @ts-ignore
|
|
import classes from './styles.module.scss';
|
|
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
|
|
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
|
|
|
|
SyntaxHighlighter.registerLanguage('scss', scss);
|
|
|
|
const Copyable = (props) => {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
let timeout;
|
|
|
|
useEffect(() => {
|
|
if(timeout) clearTimeout(timeout);
|
|
timeout = setTimeout(() => { setCopied(false); }, 1000);
|
|
}, [copied]);
|
|
|
|
const handleClick = async({ partial }) => {
|
|
const copyText = `@import "@reuters-graphics/graphics-components/dist/scss/colours/${partial}";`
|
|
await navigator.clipboard.writeText(copyText);
|
|
setCopied(true);
|
|
}
|
|
|
|
return (
|
|
<button className="copy-btn" onClick={() => handleClick(props)}>
|
|
<span className="material-symbols-outlined">content_copy</span>
|
|
{copied && <span className="copy-tag">Copied</span>}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {
|
|
return included ? (
|
|
<div className={classes.importsnippet}>
|
|
<p>Included</p>
|
|
</div>
|
|
) : (
|
|
<div className={classes.importsnippet}>
|
|
<SyntaxHighlighter language="scss" style={prism}>
|
|
{`// global.scss \n@import "@reuters-graphics/graphics-components/dist/scss/colours/${partial}";`}
|
|
</SyntaxHighlighter>
|
|
<Copyable partial={partial} />
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default ImportSnippet; |