nexpi-ui
Version:
An elegant and minimalist Next.js 14 component library
42 lines • 2.22 kB
JavaScript
"use client";
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import Box from './Box';
import { FaRegCopy, FaCheck } from 'react-icons/fa';
import { useEffect, useState } from 'react';
import React from 'react';
var CodeBlock = function (_a) {
var language = _a.language, value = _a.value;
var _b = useState(false), isCopied = _b[0], setIsCopied = _b[1];
var handleCopy = function () {
setIsCopied(true);
};
useEffect(function () {
if (isCopied) {
navigator.clipboard.writeText(value);
setTimeout(function () {
setIsCopied(false);
}, 500);
}
}, [isCopied]);
return (React.createElement(Box, null,
React.createElement(Box, { style: { border: '1px solid var(--nxp-secondary-shadow-color)', borderRadius: 'var(--nxp-border-radius)', display: 'flex', justifyContent: 'space-between' } },
React.createElement("p", { style: { color: 'var(--nxp-primary-color)', margin: '1rem', fontSize: '13px', fontFamily: 'var(--nxp-font-family)' } }, language),
isCopied ?
React.createElement(FaCheck, { style: { fill: 'var(--nxp-secondary-color)', strokeWidth: 0.5, fontSize: '1.5rem', margin: '0.7rem', cursor: 'pointer' }, onClick: handleCopy })
: React.createElement(FaRegCopy, { style: { fill: 'var(--nxp-primary-color)', strokeWidth: 0.5, fontSize: '1.5rem', margin: '0.7rem', cursor: 'pointer' }, onClick: handleCopy })),
React.createElement(SyntaxHighlighter, { language: language, style: solarizedlight, wrapLongLines: true, customStyle: {
opacity: "1",
border: '1px solid var(--nxp-secondary-shadow-color)',
borderRadius: '4px',
fontSize: '12px',
backgroundColor: 'var(--npx-background-color)',
color: 'var(--nxp-primary-color)',
}, codeTagProps: {
style: {
color: "var(---nxp-primary-color",
},
} }, value)));
};
export default CodeBlock;
//# sourceMappingURL=Codeblock.js.map