@stianlarsen/react-code-preview/dist/index.cjs.map

A React component that provides tabbed navigation for viewing a live component preview and its source code separately.

{"version":3,"sources":["../src/index.tsx","../src/components/codeAndExamplePreview/codeAndExamplePreview.tsx","#style-inject:#style-inject","../src/css/codePreview.css","../src/hooks/useHighlightCode.tsx","../src/utils/getCodeString.tsx","../src/hooks/useTheme.tsx","../src/utils/shikiIniti.ts","../src/libs/theme/theme.tsx","../src/utils/cn.tsx","../src/components/copyButton/copyButton.tsx","../src/assets/icons/copyIcon.tsx","../src/assets/icons/copySuccessIcon.tsx","../src/css/copyButton.css","../src/components/tabs/tabs.tsx","../src/components/codeOnlyPreview/codeOnlyPreview.tsx"],"sourcesContent":["import { CodeAndExamplePreview } from \"./components/codeAndExamplePreview/codeAndExamplePreview\";\nimport { CodeOnlyPreview } from \"./components/codeOnlyPreview/codeOnlyPreview\";\nimport \"./css/codePreview.css\";\nimport { CodePreviewProps } from \"./types/types\";\n\nconst CodePreview = (props: CodePreviewProps) => {\n  if (\"component\" in props) {\n    return <CodeAndExamplePreview {...props} />;\n  }\n  return <CodeOnlyPreview {...props} />;\n};\n\nexport * from \"./types/types\";\nexport { CodePreview };\n","import {ComponentType, isValidElement, ReactElement, ReactNode, Suspense, useState,} from \"react\";\nimport \"../../css/codePreview.css\";\nimport {useHighlightCode} from \"../../hooks/useHighlightCode\";\nimport {defaultDarkTheme} from \"../../libs/theme/theme\";\nimport {CodeAndPreviewProps, TabsType} from \"../../types/types\";\nimport {cn} from \"../../utils/cn\";\nimport {CopyButton} from \"../copyButton/copyButton\";\nimport {Tabs} from \"../tabs/tabs\";\n\nexport const CodeAndExamplePreview = ({\n  component: PreviewComponent,\n  code,\n  lightTheme = defaultDarkTheme,\n  darkTheme = defaultDarkTheme,\n  className,\n  style,\n  initialTab = \"preview\",\n    onCopied\n}: CodeAndPreviewProps) => {\n  const [activeTab, setActiveTab] = useState<TabsType>(initialTab);\n  const { highlightedCode, codeString, loadingCode } = useHighlightCode(\n    code,\n    lightTheme,\n    darkTheme\n  );\n  const classname = cn(\"code-preview\", className);\n  return (\n    <Suspense fallback={<></>}>\n      <div className={classname} style={{ ...style }}>\n        <Tabs setActiveTab={setActiveTab} activeTab={activeTab} />\n\n        <div className=\"code-preview__content\">\n          {activeTab === \"preview\" && PreviewComponent && (\n            <div className=\"code-preview__content__component-wrapper\">\n              {renderComponent(PreviewComponent)}\n            </div>\n          )}\n\n          {activeTab === \"code\" && highlightedCode && !loadingCode && (\n            <>\n              <CopyButton value={codeString} onCopied={onCopied} />\n\n              {!loadingCode && (\n                <div\n                  className=\"code-preview__content__code-wrapper\"\n                  dangerouslySetInnerHTML={{ __html: highlightedCode }}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </Suspense>\n  );\n};\n\nconst renderComponent = (\n  component: ComponentType<any> | ReactElement\n): ReactNode => {\n  try {\n    if (isValidElement(component)) {\n      return component;\n    } else {\n      const Component = component as ComponentType<any>;\n      return <Component />;\n    }\n  } catch (e) {\n    console.error(\"== renderComponent ==\\nError rendering component\", e);\n  }\n};\n","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';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\nimport { useEffect, useState } from \"react\";\nimport { BundledTheme } from \"shiki\";\nimport { Themes, UseHighlightCode } from \"../types/types\";\nimport { getCodeString } from \"../utils/getCodeString\";\nimport { useTheme } from \"./useTheme\";\nimport { getShikiHighlighter } from \"../utils/shikiIniti\";\n\nexport const useHighlightCode = (\n  codeString: string,\n  lightTheme?: Themes,\n  darkTheme?: Themes,\n): UseHighlightCode => {\n  const [highlightedCode, setHighlightedCode] = useState<string>(\"\");\n  const [formattedCodeString] = useState<string>(getCodeString(codeString));\n  const [loadingCode, setLoadingCode] = useState<boolean>(true);\n\n  const { theme } = useTheme();\n\n  useEffect(() => {\n    let mounted = true;\n\n    const highlightCodeAsync = async () => {\n      try {\n        const highlighter = await getShikiHighlighter();\n\n        if (!mounted) return;\n\n        let themeToLoad =\n          theme === \"dark\"\n            ? (darkTheme ?? \"blackout\")\n            : (lightTheme ?? \"blackout\");\n\n        if (themeToLoad === \"blackout\") {\n          await highlighter.loadTheme(blackout as unknown as BundledTheme);\n        } else {\n          await highlighter.loadTheme(themeToLoad);\n        }\n\n        const html = highlighter.codeToHtml(formattedCodeString, {\n          lang: \"typescript\",\n          theme:\n            themeToLoad === \"blackout\" ? \"lambda-studio-blackout\" : themeToLoad,\n        });\n\n        if (mounted) {\n          setHighlightedCode(html);\n          setLoadingCode(false);\n        }\n      } catch (e) {\n        console.error(\"Error while highlighting code:\", e);\n        if (mounted) {\n          setLoadingCode(false);\n        }\n      }\n    };\n\n    highlightCodeAsync();\n\n    return () => {\n      mounted = false;\n    };\n  }, [darkTheme, lightTheme, theme, formattedCodeString]);\n\n  return { highlightedCode, codeString: formattedCodeString, loadingCode };\n};\n\nconst blackout = {\n  name: \"lambda-studio-blackout\",\n  type: \"dark\",\n  displayName: \"Lambda Studio - Blackout\",\n  semanticHighlighting: true,\n  colors: {\n    \"editorLink.activeForeground\": \"#ca8a0488\",\n    foreground: \"#fff8\",\n    \"button.background\": \"#fff\",\n    \"button.foreground\": \"#000\",\n    \"button.hoverBackground\": \"#fffb\",\n    \"list.highlightForeground\": \"#fff\",\n    \"textLink.foreground\": \"#fff\",\n    \"scrollbar.shadow\": \"#000\",\n    \"textLink.activeForeground\": \"#fff8\",\n    \"editor.lineHighlightBackground\": \"#8881\",\n    \"editor.lineHighlightBorder\": \"#8882\",\n    \"editorCursor.foreground\": \"#fff\",\n    \"editor.findMatchBackground\": \"#fff8\",\n    \"editor.findMatchHighlightBackground\": \"#fff2\",\n    \"list.activeSelectionForeground\": \"#fff\",\n    \"list.focusForeground\": \"#fff\",\n    \"list.hoverForeground\": \"#fff\",\n    \"list.inactiveSelectionForeground\": \"#fff\",\n    \"list.inactiveSelectionBackground\": \"#000\",\n    \"list.focusBackground\": \"#000\",\n    \"list.focusAndSelectionOutline\": \"#000\",\n    \"list.focusHighlightForeground\": \"#fff\",\n    \"list.hoverBackground\": \"#000\",\n    \"list.focusOutline\": \"#000\",\n    \"list.activeSelectionBackground\": \"#000\",\n    \"editorIndentGuide.background\": \"#fff2\",\n    \"editor.background\": \"#18181b\",\n    \"editor.foreground\": \"#fff\",\n    \"editor.foldBackground\": \"#000\",\n    \"editor.hoverHighlightBackground\": \"#000\",\n    \"editor.selectionBackground\": \"#8888\",\n    \"editor.inactiveSelectionBackground\": \"#8882\",\n    \"gitDecoration.modifiedResourceForeground\": \"#fff\",\n    \"gitDecoration.untrackedResourceForeground\": \"#a7cb7b\",\n    \"gitDecoration.conflictingResourceForeground\": \"#ca8a04\",\n    \"gitDecoration.deletedResourceForeground\": \"#c97b89\",\n    \"listFilterWidget.background\": \"#000\",\n    \"input.background\": \"#fff1\",\n    \"titleBar.activeForeground\": \"#fff\",\n    \"editorWidget.background\": \"#000\",\n    \"editorGutter.background\": \"#000\",\n    \"debugToolBar.background\": \"#000\",\n    \"commandCenter.background\": \"#000\",\n    \"sideBarSectionHeader.background\": \"#000\",\n    focusBorder: \"#fff8\",\n    \"titleBar.activeBackground\": \"#000\",\n    \"titleBar.inactiveBackground\": \"#000\",\n    \"breadcrumb.background\": \"#000\",\n    \"activityBar.background\": \"#000\",\n    \"activityBar.foreground\": \"#fff8\",\n    \"panel.background\": \"#000\",\n    \"sideBar.background\": \"#000\",\n    \"sideBarTitle.foreground\": \"#fff8\",\n    \"tab.hoverBackground\": \"#000\",\n    \"terminal.background\": \"#000\",\n    \"statusBar.background\": \"#000\",\n    \"statusBar.foreground\": \"#fff8\",\n    \"selection.background\": \"#fff2\",\n    \"editorPane.background\": \"#000\",\n    \"badge.background\": \"#000\",\n    \"banner.background\": \"#000\",\n    \"menu.background\": \"#000\",\n    \"activityBarBadge.background\": \"#000\",\n    \"activityBarBadge.foreground\": \"#fff8\",\n    \"editorLineNumber.foreground\": \"#fff2\",\n    \"editorLineNumber.activeForeground\": \"#fff8\",\n    \"statusBarItem.errorBackground\": \"#f43f5e\",\n  },\n  semanticTokenColors: {\n    comment: {\n      foreground: \"#fff4\",\n    },\n    keyword: {\n      foreground: \"#fff8\",\n    },\n    string: {\n      foreground: \"#fff8\",\n    },\n    selfKeyword: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    \"method.declaration\": {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    \"method.definition\": {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    method: {\n      foreground: \"#fff\",\n      bold: false,\n    },\n    \"function.declaration\": {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    \"function.definition\": {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    function: {\n      foreground: \"#fff\",\n      bold: false,\n    },\n    property: {\n      foreground: \"#fff\",\n    },\n    enumMember: {\n      foreground: \"#fff8\",\n      bold: false,\n    },\n    enum: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    boolean: {\n      foreground: \"#fff8\",\n    },\n    number: {\n      foreground: \"#fff8\",\n    },\n    type: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    typeAlias: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    class: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    selfTypeKeyword: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    builtinType: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    interface: {\n      foreground: \"#fff8\",\n      bold: false,\n    },\n    typeParameter: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n    lifetime: {\n      foreground: \"#fff8\",\n      italic: false,\n      bold: false,\n    },\n    namespace: {\n      foreground: \"#fff\",\n    },\n    macro: {\n      foreground: \"#fff\",\n      bold: false,\n    },\n    decorator: {\n      foreground: \"#fff\",\n      bold: false,\n    },\n    builtinAttribute: {\n      foreground: \"#fff\",\n      bold: false,\n    },\n    \"generic.attribute\": {\n      foreground: \"#fff\",\n    },\n    derive: {\n      foreground: \"#fff\",\n    },\n    operator: {\n      foreground: \"#fff8\",\n    },\n    variable: {\n      foreground: \"#fff\",\n    },\n    \"variable.readonly\": {\n      foreground: \"#fff8\",\n    },\n    parameter: {\n      foreground: \"#fff\",\n    },\n    \"variable.mutable\": {\n      underline: true,\n    },\n    \"parameter.mutable\": {\n      underline: true,\n    },\n    \"selfKeyword.mutable\": {\n      underline: true,\n    },\n    \"variable.constant\": {\n      foreground: \"#fff8\",\n    },\n    struct: {\n      foreground: \"#fff\",\n      bold: true,\n    },\n  },\n  tokenColors: [\n    {\n      name: \"Fallback Operator\",\n      scope: [\"keyword.operator\"],\n      settings: {\n        foreground: \"#fff8\",\n      },\n    },\n    {\n      name: \"Fallback keywords\",\n      scope: [\n        \"storage.type.ts\",\n        \"keyword\",\n        \"keyword.other\",\n        \"keyword.control\",\n        \"storage.type\",\n        \"storage.modifier\",\n      ],\n      settings: {\n        foreground: \"#fff8\",\n      },\n    },\n    {\n      name: \"Fallback strings\",\n      scope: [\"string\"],\n      settings: {\n        foreground: \"#fff8\",\n      },\n    },\n    {\n      name: \"Fallback JSON Properties\",\n      scope: [\"support.type.property-name.json\"],\n      settings: {\n        foreground: \"#fff\",\n      },\n    },\n    {\n      name: \"Fallback string variables\",\n      scope: [\"string variable\", \"string meta.interpolation\"],\n      settings: {\n        foreground: \"#fff\",\n      },\n    },\n    {\n      name: \"Fallback comments\",\n      scope: [\"comment\"],\n      settings: {\n        foreground: \"#fff4\",\n      },\n    },\n    {\n      name: \"Fallback constants\",\n      scope: [\"constant\"],\n      settings: {\n        foreground: \"#fff8\",\n      },\n    },\n    {\n      name: \"Fallback self/this\",\n      scope: [\"variable.language.this\"],\n      settings: {\n        foreground: \"#fff\",\n      },\n    },\n    {\n      name: \"Fallback types\",\n      scope: [\n        \"entity.other.alias\",\n        \"source.php support.class\",\n        \"entity.name.type\",\n        \"meta.function-call support.class\",\n        \"keyword.other.type\",\n        \"entity.other.inherited-class\",\n      ],\n      settings: {\n        foreground: \"#fff\",\n        fontStyle: \"bold\",\n      },\n    },\n    {\n      name: \"Fallback method calls\",\n      scope: [\"meta.method-call entity.name.function\"],\n      settings: {\n        foreground: \"#fff\",\n        fontStyle: \"\",\n      },\n    },\n    {\n      name: \"Fallback function calls\",\n      scope: [\n        \"meta.function-call entity.name.function\",\n        \"meta.function-call support.function\",\n        \"meta.function.call entity.name.function\",\n      ],\n      settings: {\n        foreground: \"#fff\",\n        fontStyle: \"\",\n      },\n    },\n    {\n      name: \"Fallback enums & constants\",\n      scope: [\"constant.enum\", \"constant.other\"],\n      settings: {\n        foreground: \"#fff8\",\n      },\n    },\n    {\n      name: \"Fallback Properties & func arguments\",\n      scope: [\n        \"variable.other.property\",\n        \"entity.name.goto-label\",\n        \"entity.name.variable.parameter\",\n      ],\n      settings: {\n        foreground: \"#fff\",\n      },\n    },\n    {\n      name: \"Fallback functions & methods declarations\",\n      scope: [\n        \"entity.name.function\",\n        \"support.function\",\n        \"support.function.constructor\",\n        \"entity.name.function meta.function-call meta.method-call\",\n      ],\n      settings: {\n        foreground: \"#fff\",\n        fontStyle: \"bold\",\n      },\n    },\n    {\n      name: \"HTML Tags\",\n      scope: [\"meta.tag entity.name.tag.html\", \"entity.name.tag.template.html\"],\n      settings: {\n        foreground: \"#fff\",\n      },\n    },\n    {\n      name: \"HTML Attributes\",\n      scope: [\"entity.other.attribute-name.html\"],\n      settings: {\n        foreground: \"#fff8\",\n      },\n    },\n    {\n      name: \"HTML Custom Tag\",\n      scope: [\"meta.tag.other.unrecognized.html entity.name.tag.html\"],\n      settings: {\n        foreground: \"#fff\",\n      },\n    },\n    {\n      name: \"HTML Keywords\",\n      scope: [\"text.html keyword\"],\n      settings: {\n        foreground: \"#fff\",\n      },\n    },\n    {\n      name: \"Punctuations\",\n      scope: [\"punctuation\", \"meta.brace\"],\n      settings: {\n        foreground: \"#fff8\",\n      },\n    },\n  ],\n};\n","export const getCodeString = (codeString: string) =>\n  codeString\n    .replace(/^```[\\w\\s]*[\\r\\n]+/gm, \"\")\n    .replace(/[\\r\\n]+\\s*```$/gm, \"\")\n    .trim();\n","import { useEffect, useState } from \"react\";\n\nexport const useTheme = (): { theme: string } => {\n  const [isDarkmodeActive, setIsDarkmodeActive] = useState(false);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      if (mq.matches) {\n        setIsDarkmodeActive(true);\n      }\n      mq.addEventListener(\"change\", (evt) => setIsDarkmodeActive(evt.matches));\n\n      return () => {\n        mq.removeEventListener(\"change\", (evt) =>\n          setIsDarkmodeActive(evt.matches)\n        );\n      };\n    }\n  }, []);\n\n  return { theme: isDarkmodeActive ? \"dark\" : \"light\" };\n};\n","import { createHighlighter, type Highlighter } from \"shiki\";\n\nlet highlighterInstance: Highlighter | null = null;\n\nexport const getShikiHighlighter = async () => {\n  if (!highlighterInstance) {\n    highlighterInstance = await createHighlighter({\n      langs: [\"typescript\"],\n      themes: [],\n    });\n  }\n  return highlighterInstance;\n};\n","import { Themes } from \"../../types/types\";\n\nexport const defaultDarkTheme: Themes = \"blackout\";\nexport const defaultLightTheme: Themes = \"github-light-default\";\n","export const cn = (...classNames: (string | undefined)[]) => {\n  return classNames.filter(Boolean).join(\" \");\n};\n","import {copy} from \"@stianlarsen/copy-to-clipboard\";\nimport {useState} from \"react\";\nimport {CopyIcon} from \"../../assets/icons/copyIcon\";\nimport {CopySuccessIcon} from \"../../assets/icons/copySuccessIcon\";\nimport \"../../css/copyButton.css\";\n\nexport const CopyButton = ({ value, onCopied }: { value: string, onCopied: () => void }) => {\n  const [copied, setCopied] = useState(false);\n  const handleCopyClick = async () => {\n    await copy(value);\n    if (onCopied) {\n      onCopied()\n    }\n    setCopied(true);\n    setTimeout(() => {\n      setCopied(false);\n    }, 2000);\n  };\n\n  return (\n    <button\n      onClick={handleCopyClick}\n      type={\"button\"}\n      className={`copy-button ${copied ? \"copy-button-released\" : \"\"} `}\n      aria-disabled={copied}\n      disabled={copied}\n    >\n      {copied ? <CopySuccessIcon /> : <CopyIcon />}\n    </button>\n  );\n};\n","export const CopyIcon = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"1.5\"\n      stroke=\"currentColor\"\n      width={16}\n      height={16}\n      className=\"copy-icon copy-success\"\n      fill=\"none\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        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\"\n      />\n    </svg>\n  );\n};\n","export const CopySuccessIcon = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"1.5\"\n      stroke=\"currentColor\"\n      width={16}\n      height={16}\n      className=\"copy-icon copy\"\n      fill=\"none\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        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\"\n      />\n    </svg>\n  );\n};\n","import styleInject from '#style-inject';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\")","import { useLayoutEffect, useRef, useState } from \"react\";\nimport { TabsType } from \"../../types/types\";\n\nexport const Tabs = ({\n  activeTab,\n  setActiveTab,\n}: {\n  activeTab: string;\n  setActiveTab: (newTab: TabsType) => void;\n}) => {\n  const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);\n  const [underlineStyle, setUnderlineStyle] = useState({\n    left: activeTab === \"preview\" ? \"0\" : \"86px\",\n    width: activeTab === \"preview\" ? \"82px\" : \"65px\",\n  });\n\n  const updateActiveTab = (tabIndex: number, newTab: TabsType) => {\n    setActiveTab(newTab);\n    const tabElement = tabsRef.current[tabIndex];\n    if (tabElement) {\n      const { offsetLeft, clientWidth } = tabElement;\n      setUnderlineStyle({\n        left: `${offsetLeft}px`,\n        width: `${clientWidth}px`,\n      });\n    }\n  };\n\n  useLayoutEffect(() => {\n    const activeIndex = tabsRef.current.findIndex(\n      (tab) => tab?.textContent?.toLowerCase() === activeTab\n    );\n\n    if (activeIndex !== -1 && tabsRef.current[activeIndex]) {\n      const { offsetLeft, clientWidth } = tabsRef.current[activeIndex]!;\n      setUnderlineStyle({\n        left: `${offsetLeft}px`,\n        width: `${clientWidth}px`,\n      });\n    }\n  }, [activeTab]);\n\n  return (\n    <div className=\"code-preview__tabs\">\n      {([\"preview\", \"code\"] as TabsType[]).map((tabName, index) => (\n        <button\n          key={tabName}\n          className={`code-preview__tabs__trigger ${\n            activeTab === tabName ? \"code-preview__tabs__trigger-active\" : \"\"\n          }`}\n          ref={(el) => {\n            tabsRef.current[index] = el;\n          }}\n          onClick={() => updateActiveTab(index, tabName)}\n        >\n          {tabName.charAt(0).toUpperCase() + tabName.slice(1)}\n        </button>\n      ))}\n      <div className={\"code-preview__tabs__underline\"} style={underlineStyle} />\n    </div>\n  );\n};\n","import {Suspense} from \"react\";\nimport \"../../css/codePreview.css\";\nimport {useHighlightCode} from \"../../hooks/useHighlightCode\";\nimport {PreviewOnlyCodeProps} from \"../../types/types\";\nimport {cn} from \"../../utils/cn\";\nimport {CopyButton} from \"../copyButton/copyButton\";\n\nexport const CodeOnlyPreview = (props: PreviewOnlyCodeProps) => {\n  const { code, darkTheme, lightTheme, className, style, onCopied } = props;\n  const { highlightedCode, codeString } = useHighlightCode(\n    code,\n    lightTheme,\n    darkTheme\n  );\n  const classname = cn(\"code-preview\", className);\n  return (\n    <Suspense fallback={<></>}>\n      <div className={classname} style={{ ...style }}>\n        <div className=\"code-preview__content\">\n          {highlightedCode && (\n            <>\n              <CopyButton value={codeString} onCopied={onCopied} />\n\n              <div\n                className=\"code-preview__content__code-wrapper\"\n                dangerouslySetInnerHTML={{ __html: highlightedCode }}\n              />\n            </>\n          )}\n        </div>\n      </div>\n    </Suspense>\n  );\n};\n"],"mappings":"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","names":["import_react","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}