@stianlarsen/react-code-preview
Version:
A React component that provides tabbed navigation for viewing a live component preview and its source code separately.
746 lines (726 loc) • 27 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.tsx
var index_exports = {};
__export(index_exports, {
CodePreview: () => CodePreview
});
module.exports = __toCommonJS(index_exports);
// src/components/codeAndExamplePreview/codeAndExamplePreview.tsx
var import_react5 = require("react");
// #style-inject:#style-inject
function styleInject(css, { insertAt } = {}) {
if (!css || typeof document === "undefined") return;
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
style.type = "text/css";
if (insertAt === "top") {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
// src/css/codePreview.css
styleInject(".code-preview {\n --cp-radius: 0.5rem;\n --cp-background: hsl(0 0% 100%);\n --cp-background-editor: hsl(240 6% 10%);\n --cp-foreground: hsl(240 10% 3.9%);\n --cp-muted-foreground: hsl(240 3.8% 46.1%);\n --cp-border: hsl(240 5.9% 90%);\n --cp-black: hsl(0 0 0%);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n height: 100%;\n max-width: 700px;\n padding: 1rem;\n gap: 1.25rem;\n}\n.code-preview__tabs {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n min-width: 100%;\n box-shadow: inset 0 -1px var(--cp-border);\n}\n.code-preview__tabs__trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n cursor: pointer;\n padding: 0.5rem 1rem 0.75rem;\n line-height: 1.25rem;\n font-size: 0.875rem;\n font-weight: 500;\n position: relative;\n background-color: transparent;\n border-color: transparent;\n cursor: pointer;\n color: var(--cp-muted-foreground);\n text-rendering: optimizeLegibility;\n transition: color 0.15s ease;\n}\n.code-preview__tabs__trigger:hover {\n color: var(--cp-foreground);\n}\n.code-preview__tabs__trigger-active {\n color: var(--cp-foreground);\n}\n.code-preview__tabs__underline {\n position: absolute;\n bottom: 0;\n height: 2px;\n background-color: var(--cp-foreground);\n transition: left 0.25s ease, width 0.25s ease;\n border-radius: 0.7px;\n}\n.code-preview__content {\n width: 100%;\n overflow: hidden;\n position: relative;\n overflow-y: scroll;\n scroll-behavior: smooth;\n}\n.code-preview__content__component-wrapper {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n justify-content: center;\n align-items: center;\n width: 100%;\n min-height: 250px;\n padding: 1rem;\n border: 1px solid var(--cp-border);\n border-radius: var(--cp-radius);\n}\n.code-preview__content__code-wrapper {\n height: 100%;\n border: 1px solid var(--cp-border);\n border-radius: var(--cp-radius);\n overflow: auto;\n}\n.code-preview__content__code-wrapper pre {\n padding: 1rem 0;\n background-color: var(--cp-background-editor);\n height: 100%;\n max-height: 350px;\n overflow: auto;\n}\n.code-preview__content__code-wrapper pre code {\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: grid;\n min-width: 100%;\n overflow-wrap: break-word;\n border-radius: 0;\n border-width: 0;\n background-color: transparent;\n padding: 0;\n counter-reset: line;\n -webkit-box-decoration-break: clone;\n overflow-x: scroll;\n}\n.code-preview__content__code-wrapper pre code .line {\n display: inline-block;\n min-height: 1rem;\n width: 100%;\n padding: 0.125rem 1rem;\n}\n@media (prefers-color-scheme: dark) {\n .code-preview {\n --cp-background: hsl(240 10% 3.9%);\n --cp-foreground: hsl(0 0% 98%);\n --cp-border: hsl(240 3.7% 15.9%);\n }\n}\n");
// src/hooks/useHighlightCode.tsx
var import_react2 = require("react");
// src/utils/getCodeString.tsx
var getCodeString = (codeString) => codeString.replace(/^```[\w\s]*[\r\n]+/gm, "").replace(/[\r\n]+\s*```$/gm, "").trim();
// src/hooks/useTheme.tsx
var import_react = require("react");
var useTheme = () => {
const [isDarkmodeActive, setIsDarkmodeActive] = (0, import_react.useState)(false);
(0, import_react.useEffect)(() => {
if (typeof window !== "undefined") {
const mq = window.matchMedia("(prefers-color-scheme: dark)");
if (mq.matches) {
setIsDarkmodeActive(true);
}
mq.addEventListener("change", (evt) => setIsDarkmodeActive(evt.matches));
return () => {
mq.removeEventListener(
"change",
(evt) => setIsDarkmodeActive(evt.matches)
);
};
}
}, []);
return { theme: isDarkmodeActive ? "dark" : "light" };
};
// src/utils/shikiIniti.ts
var import_shiki = require("shiki");
var highlighterInstance = null;
var getShikiHighlighter = async () => {
if (!highlighterInstance) {
highlighterInstance = await (0, import_shiki.createHighlighter)({
langs: ["typescript"],
themes: []
});
}
return highlighterInstance;
};
// src/hooks/useHighlightCode.tsx
var useHighlightCode = (codeString, lightTheme, darkTheme) => {
const [highlightedCode, setHighlightedCode] = (0, import_react2.useState)("");
const [formattedCodeString] = (0, import_react2.useState)(getCodeString(codeString));
const [loadingCode, setLoadingCode] = (0, import_react2.useState)(true);
const { theme } = useTheme();
(0, import_react2.useEffect)(() => {
let mounted = true;
const highlightCodeAsync = async () => {
try {
const highlighter = await getShikiHighlighter();
if (!mounted) return;
let themeToLoad = theme === "dark" ? darkTheme ?? "blackout" : lightTheme ?? "blackout";
if (themeToLoad === "blackout") {
await highlighter.loadTheme(blackout);
} else {
await highlighter.loadTheme(themeToLoad);
}
const html = highlighter.codeToHtml(formattedCodeString, {
lang: "typescript",
theme: themeToLoad === "blackout" ? "lambda-studio-blackout" : themeToLoad
});
if (mounted) {
setHighlightedCode(html);
setLoadingCode(false);
}
} catch (e) {
console.error("Error while highlighting code:", e);
if (mounted) {
setLoadingCode(false);
}
}
};
highlightCodeAsync();
return () => {
mounted = false;
};
}, [darkTheme, lightTheme, theme, formattedCodeString]);
return { highlightedCode, codeString: formattedCodeString, loadingCode };
};
var blackout = {
name: "lambda-studio-blackout",
type: "dark",
displayName: "Lambda Studio - Blackout",
semanticHighlighting: true,
colors: {
"editorLink.activeForeground": "#ca8a0488",
foreground: "#fff8",
"button.background": "#fff",
"button.foreground": "#000",
"button.hoverBackground": "#fffb",
"list.highlightForeground": "#fff",
"textLink.foreground": "#fff",
"scrollbar.shadow": "#000",
"textLink.activeForeground": "#fff8",
"editor.lineHighlightBackground": "#8881",
"editor.lineHighlightBorder": "#8882",
"editorCursor.foreground": "#fff",
"editor.findMatchBackground": "#fff8",
"editor.findMatchHighlightBackground": "#fff2",
"list.activeSelectionForeground": "#fff",
"list.focusForeground": "#fff",
"list.hoverForeground": "#fff",
"list.inactiveSelectionForeground": "#fff",
"list.inactiveSelectionBackground": "#000",
"list.focusBackground": "#000",
"list.focusAndSelectionOutline": "#000",
"list.focusHighlightForeground": "#fff",
"list.hoverBackground": "#000",
"list.focusOutline": "#000",
"list.activeSelectionBackground": "#000",
"editorIndentGuide.background": "#fff2",
"editor.background": "#18181b",
"editor.foreground": "#fff",
"editor.foldBackground": "#000",
"editor.hoverHighlightBackground": "#000",
"editor.selectionBackground": "#8888",
"editor.inactiveSelectionBackground": "#8882",
"gitDecoration.modifiedResourceForeground": "#fff",
"gitDecoration.untrackedResourceForeground": "#a7cb7b",
"gitDecoration.conflictingResourceForeground": "#ca8a04",
"gitDecoration.deletedResourceForeground": "#c97b89",
"listFilterWidget.background": "#000",
"input.background": "#fff1",
"titleBar.activeForeground": "#fff",
"editorWidget.background": "#000",
"editorGutter.background": "#000",
"debugToolBar.background": "#000",
"commandCenter.background": "#000",
"sideBarSectionHeader.background": "#000",
focusBorder: "#fff8",
"titleBar.activeBackground": "#000",
"titleBar.inactiveBackground": "#000",
"breadcrumb.background": "#000",
"activityBar.background": "#000",
"activityBar.foreground": "#fff8",
"panel.background": "#000",
"sideBar.background": "#000",
"sideBarTitle.foreground": "#fff8",
"tab.hoverBackground": "#000",
"terminal.background": "#000",
"statusBar.background": "#000",
"statusBar.foreground": "#fff8",
"selection.background": "#fff2",
"editorPane.background": "#000",
"badge.background": "#000",
"banner.background": "#000",
"menu.background": "#000",
"activityBarBadge.background": "#000",
"activityBarBadge.foreground": "#fff8",
"editorLineNumber.foreground": "#fff2",
"editorLineNumber.activeForeground": "#fff8",
"statusBarItem.errorBackground": "#f43f5e"
},
semanticTokenColors: {
comment: {
foreground: "#fff4"
},
keyword: {
foreground: "#fff8"
},
string: {
foreground: "#fff8"
},
selfKeyword: {
foreground: "#fff",
bold: true
},
"method.declaration": {
foreground: "#fff",
bold: true
},
"method.definition": {
foreground: "#fff",
bold: true
},
method: {
foreground: "#fff",
bold: false
},
"function.declaration": {
foreground: "#fff",
bold: true
},
"function.definition": {
foreground: "#fff",
bold: true
},
function: {
foreground: "#fff",
bold: false
},
property: {
foreground: "#fff"
},
enumMember: {
foreground: "#fff8",
bold: false
},
enum: {
foreground: "#fff",
bold: true
},
boolean: {
foreground: "#fff8"
},
number: {
foreground: "#fff8"
},
type: {
foreground: "#fff",
bold: true
},
typeAlias: {
foreground: "#fff",
bold: true
},
class: {
foreground: "#fff",
bold: true
},
selfTypeKeyword: {
foreground: "#fff",
bold: true
},
builtinType: {
foreground: "#fff",
bold: true
},
interface: {
foreground: "#fff8",
bold: false
},
typeParameter: {
foreground: "#fff",
bold: true
},
lifetime: {
foreground: "#fff8",
italic: false,
bold: false
},
namespace: {
foreground: "#fff"
},
macro: {
foreground: "#fff",
bold: false
},
decorator: {
foreground: "#fff",
bold: false
},
builtinAttribute: {
foreground: "#fff",
bold: false
},
"generic.attribute": {
foreground: "#fff"
},
derive: {
foreground: "#fff"
},
operator: {
foreground: "#fff8"
},
variable: {
foreground: "#fff"
},
"variable.readonly": {
foreground: "#fff8"
},
parameter: {
foreground: "#fff"
},
"variable.mutable": {
underline: true
},
"parameter.mutable": {
underline: true
},
"selfKeyword.mutable": {
underline: true
},
"variable.constant": {
foreground: "#fff8"
},
struct: {
foreground: "#fff",
bold: true
}
},
tokenColors: [
{
name: "Fallback Operator",
scope: ["keyword.operator"],
settings: {
foreground: "#fff8"
}
},
{
name: "Fallback keywords",
scope: [
"storage.type.ts",
"keyword",
"keyword.other",
"keyword.control",
"storage.type",
"storage.modifier"
],
settings: {
foreground: "#fff8"
}
},
{
name: "Fallback strings",
scope: ["string"],
settings: {
foreground: "#fff8"
}
},
{
name: "Fallback JSON Properties",
scope: ["support.type.property-name.json"],
settings: {
foreground: "#fff"
}
},
{
name: "Fallback string variables",
scope: ["string variable", "string meta.interpolation"],
settings: {
foreground: "#fff"
}
},
{
name: "Fallback comments",
scope: ["comment"],
settings: {
foreground: "#fff4"
}
},
{
name: "Fallback constants",
scope: ["constant"],
settings: {
foreground: "#fff8"
}
},
{
name: "Fallback self/this",
scope: ["variable.language.this"],
settings: {
foreground: "#fff"
}
},
{
name: "Fallback types",
scope: [
"entity.other.alias",
"source.php support.class",
"entity.name.type",
"meta.function-call support.class",
"keyword.other.type",
"entity.other.inherited-class"
],
settings: {
foreground: "#fff",
fontStyle: "bold"
}
},
{
name: "Fallback method calls",
scope: ["meta.method-call entity.name.function"],
settings: {
foreground: "#fff",
fontStyle: ""
}
},
{
name: "Fallback function calls",
scope: [
"meta.function-call entity.name.function",
"meta.function-call support.function",
"meta.function.call entity.name.function"
],
settings: {
foreground: "#fff",
fontStyle: ""
}
},
{
name: "Fallback enums & constants",
scope: ["constant.enum", "constant.other"],
settings: {
foreground: "#fff8"
}
},
{
name: "Fallback Properties & func arguments",
scope: [
"variable.other.property",
"entity.name.goto-label",
"entity.name.variable.parameter"
],
settings: {
foreground: "#fff"
}
},
{
name: "Fallback functions & methods declarations",
scope: [
"entity.name.function",
"support.function",
"support.function.constructor",
"entity.name.function meta.function-call meta.method-call"
],
settings: {
foreground: "#fff",
fontStyle: "bold"
}
},
{
name: "HTML Tags",
scope: ["meta.tag entity.name.tag.html", "entity.name.tag.template.html"],
settings: {
foreground: "#fff"
}
},
{
name: "HTML Attributes",
scope: ["entity.other.attribute-name.html"],
settings: {
foreground: "#fff8"
}
},
{
name: "HTML Custom Tag",
scope: ["meta.tag.other.unrecognized.html entity.name.tag.html"],
settings: {
foreground: "#fff"
}
},
{
name: "HTML Keywords",
scope: ["text.html keyword"],
settings: {
foreground: "#fff"
}
},
{
name: "Punctuations",
scope: ["punctuation", "meta.brace"],
settings: {
foreground: "#fff8"
}
}
]
};
// src/libs/theme/theme.tsx
var defaultDarkTheme = "blackout";
// src/utils/cn.tsx
var cn = (...classNames) => {
return classNames.filter(Boolean).join(" ");
};
// src/components/copyButton/copyButton.tsx
var import_copy_to_clipboard = require("@stianlarsen/copy-to-clipboard");
var import_react3 = require("react");
// src/assets/icons/copyIcon.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var CopyIcon = () => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: 16,
height: 16,
className: "copy-icon copy-success",
fill: "none",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
}
)
}
);
};
// src/assets/icons/copySuccessIcon.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var CopySuccessIcon = () => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: 16,
height: 16,
className: "copy-icon copy",
fill: "none",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
}
)
}
);
};
// src/css/copyButton.css
styleInject(".copy-button {\n margin: 0;\n cursor: pointer;\n padding: 0.4rem;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n font-weight: 500;\n line-height: 1;\n text-transform: none;\n font-family: inherit;\n border-radius: 0.5rem;\n box-shadow: none;\n display: flex;\n overflow: hidden;\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n border-width: 1px;\n border-style: solid;\n border-color: var(--cp-muted-foreground);\n background-color: var(--cp-black);\n color: var(--cp-background);\n transition: all 0.2s ease;\n opacity: 0.65;\n z-index: 100;\n}\n.copy-button .copy-icon {\n transition: all 0.2s ease;\n width: 1.5rem;\n height: 1.5rem;\n fill: none;\n color: var(--cp-background);\n}\n.copy-button:hover,\n.copy-button:focus {\n --cp-black: hsl(0, 0%, 13%);\n background-color: var(--cp-black);\n opacity: 1;\n}\n.copy-button:active {\n opacity: 1;\n transform: scale(0.96);\n border-color: var(--cp-border);\n}\n.copy-button-released {\n animation: successFade 1s linear;\n}\n@media screen and (max-width: 768px) {\n .copy-button {\n opacity: 1;\n }\n}\n@media screen and (prefers-color-scheme: dark) {\n .copy-button .copy-icon {\n color: var(--cp-foreground);\n }\n}\n@keyframes successFade {\n from {\n border-color: #10b981;\n }\n to {\n border-color: var(--cp-muted-foreground);\n }\n}\n");
// src/components/copyButton/copyButton.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var CopyButton = ({ value, onCopied }) => {
const [copied, setCopied] = (0, import_react3.useState)(false);
const handleCopyClick = async () => {
await (0, import_copy_to_clipboard.copy)(value);
if (onCopied) {
onCopied();
}
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2e3);
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
onClick: handleCopyClick,
type: "button",
className: `copy-button ${copied ? "copy-button-released" : ""} `,
"aria-disabled": copied,
disabled: copied,
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopySuccessIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, {})
}
);
};
// src/components/tabs/tabs.tsx
var import_react4 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Tabs = ({
activeTab,
setActiveTab
}) => {
const tabsRef = (0, import_react4.useRef)([]);
const [underlineStyle, setUnderlineStyle] = (0, import_react4.useState)({
left: activeTab === "preview" ? "0" : "86px",
width: activeTab === "preview" ? "82px" : "65px"
});
const updateActiveTab = (tabIndex, newTab) => {
setActiveTab(newTab);
const tabElement = tabsRef.current[tabIndex];
if (tabElement) {
const { offsetLeft, clientWidth } = tabElement;
setUnderlineStyle({
left: `${offsetLeft}px`,
width: `${clientWidth}px`
});
}
};
(0, import_react4.useLayoutEffect)(() => {
const activeIndex = tabsRef.current.findIndex(
(tab) => tab?.textContent?.toLowerCase() === activeTab
);
if (activeIndex !== -1 && tabsRef.current[activeIndex]) {
const { offsetLeft, clientWidth } = tabsRef.current[activeIndex];
setUnderlineStyle({
left: `${offsetLeft}px`,
width: `${clientWidth}px`
});
}
}, [activeTab]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "code-preview__tabs", children: [
["preview", "code"].map((tabName, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"button",
{
className: `code-preview__tabs__trigger ${activeTab === tabName ? "code-preview__tabs__trigger-active" : ""}`,
ref: (el) => {
tabsRef.current[index] = el;
},
onClick: () => updateActiveTab(index, tabName),
children: tabName.charAt(0).toUpperCase() + tabName.slice(1)
},
tabName
)),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "code-preview__tabs__underline", style: underlineStyle })
] });
};
// src/components/codeAndExamplePreview/codeAndExamplePreview.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var CodeAndExamplePreview = ({
component: PreviewComponent,
code,
lightTheme = defaultDarkTheme,
darkTheme = defaultDarkTheme,
className,
style,
initialTab = "preview",
onCopied
}) => {
const [activeTab, setActiveTab] = (0, import_react5.useState)(initialTab);
const { highlightedCode, codeString, loadingCode } = useHighlightCode(
code,
lightTheme,
darkTheme
);
const classname = cn("code-preview", className);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {}), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classname, style: { ...style }, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tabs, { setActiveTab, activeTab }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "code-preview__content", children: [
activeTab === "preview" && PreviewComponent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "code-preview__content__component-wrapper", children: renderComponent(PreviewComponent) }),
activeTab === "code" && highlightedCode && !loadingCode && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CopyButton, { value: codeString, onCopied }),
!loadingCode && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"div",
{
className: "code-preview__content__code-wrapper",
dangerouslySetInnerHTML: { __html: highlightedCode }
}
)
] })
] })
] }) });
};
var renderComponent = (component) => {
try {
if ((0, import_react5.isValidElement)(component)) {
return component;
} else {
const Component = component;
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, {});
}
} catch (e) {
console.error("== renderComponent ==\nError rendering component", e);
}
};
// src/components/codeOnlyPreview/codeOnlyPreview.tsx
var import_react6 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var CodeOnlyPreview = (props) => {
const { code, darkTheme, lightTheme, className, style, onCopied } = props;
const { highlightedCode, codeString } = useHighlightCode(
code,
lightTheme,
darkTheme
);
const classname = cn("code-preview", className);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {}), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classname, style: { ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "code-preview__content", children: highlightedCode && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CopyButton, { value: codeString, onCopied }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"div",
{
className: "code-preview__content__code-wrapper",
dangerouslySetInnerHTML: { __html: highlightedCode }
}
)
] }) }) }) });
};
// src/index.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var CodePreview = (props) => {
if ("component" in props) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CodeAndExamplePreview, { ...props });
}
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CodeOnlyPreview, { ...props });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CodePreview
});
//# sourceMappingURL=index.cjs.map