@ducor/react
Version:
admin template ui interface
27 lines (26 loc) • 2.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import hljs from "highlight.js";
import "highlight.js/styles/github-dark.min.css";
import { createElement } from "react";
import { useClipboard } from "@ducor/hooks";
import { FiCheck, FiClipboard } from "react-icons/fi";
import Flex from "./flex";
import { twMerge } from "tailwind-merge";
import Button from "./button";
const Pre = ({ language = "plaintext", value = "", copyBtn = "top", header = true, }) => {
const { onCopy, hasCopied } = useClipboard();
const handleCopy = () => {
onCopy(typeof value === "string" ? value : "");
};
const highlightedCode = hljs.highlight(value, { language });
const CopyButton = () => {
if (!copyBtn)
return null;
return (_jsx(Flex, { align: 'center', className: twMerge("hljs-copy group absolute bg-gray-800 dark:bg-white/5 text-white rounded-md select-none inset-x-2", copyBtn === "top" && "top-0", copyBtn === "body" && " top-12", !header && "top-2"), children: _jsx(Flex, { align: 'center', children: _jsx(Button, { "aria-label": 'Copy', color: 'primary', variant: 'text', onClick: handleCopy, disabled: hasCopied, title: 'Copy', children: hasCopied ? _jsx(FiCheck, {}) : _jsx(FiClipboard, {}) }) }) }));
};
return (_jsx("pre", { "aria-hidden": 'true', className: twMerge(" rounded-lg text-sm bg-gray-800 dark:bg-white/5 "), children: _jsxs(Flex, { direction: 'col', className: `relative`, children: [_jsx(CopyButton, {}), header ? (_jsx("h5", { className: 'h-8 select-none text-white rounded-t-md px-4 py-2 font-sans text-xs', children: typeof header === "string" ? header : language })) : null, _jsx("div", { className: 'max-h-96 min-h-12 w-full overflow-auto hljs rounded-md ', children: createElement("code", {
className: `!whitespace-pre hljs language-${language}`,
dangerouslySetInnerHTML: { __html: highlightedCode.value },
}) })] }) }));
};
export default Pre;