50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1868,"use client" import { useEffect, useMemo, useState } from "react" import { transformerNotationDiff, transformerNotationFocus, } from "@shikijs/transformers" import { FileIcon } from "lucide-react" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" interface CodeComparisonProps { beforeCode: string afterCode: string language: string filename: string lightTheme: string darkTheme: string highlightColor?: string } export function CodeComparison({ beforeCode, afterCode, language, filename, lightTheme, darkTheme, highlightColor = "#ff3333", }: CodeComparisonProps) { const { theme, systemTheme } = useTheme() const [highlightedBefore, setHighlightedBefore] = useState("") const [highlightedAfter, setHighlightedAfter] = useState("") const [hasLeftFocus, setHasLeftFocus] = useState(false) const [hasRightFocus, setHasRightFocus] = useState(false) const selectedTheme = useMemo(() => { const currentTheme = theme === "system" ? systemTheme : theme return currentTheme === "dark" ? darkTheme : lightTheme }, [theme, systemTheme, darkTheme, lightTheme]) useEffect(() => { if (highlightedBefore || highlightedAfter) { setHasLeftFocus(highlightedBefore.includes('class="line focused"')) setHasRightFocus(highlightedAfter.includes('class="line focused"')) } }, [highlightedBefore, highlightedAfter]) useEffect(() => { async function highlightCode() { try { const { codeToHtml } = await import("shiki") const { transformerNotationHighlight } = await import("@shikijs/transformers") const before = await codeToHtml(beforeCode, { lang: language, theme: selectedTheme, transformers: [ transformerNotationHighlight({ matchAlgorithm: "v3" }), transformerNotationDiff({ matchAlgorithm: "v3" }), transformerNotationFocus({ matchAlgorithm: "v3" }), ], }) const after = await codeToHtml(afterCode, { lang: language, theme: selectedTheme, transformers: [ transformerNotationHighlight({ matchAlgorithm: "v3" }), transformerNotationDiff({ matchAlgorithm: "v3" }), transformerNotationFocus({ matchAlgorithm: "v3" }), ], }) setHighlightedBefore(before) setHighlightedAfter(after) } catch (error) { console.error("Error highlighting code:", error) setHighlightedBefore(`

${beforeCode}

`) setHighlightedAfter(`

${afterCode}

`) } } highlightCode() }, [beforeCode, afterCode, language, selectedTheme]) const renderCode = (code: string, highlighted: string) => { if (highlighted) { return (

pre]:h-full [&>pre]:w-screen! [&>pre]:py-2", "[&>pre>code]:inline-block! [&>pre>code]:w-full!", "[&>pre>code>span]:inline-block! [&>pre>code>span]:w-full [&>pre>code>span]:px-4 [&>pre>code>span]:py-0.5", "[&>pre>code>.highlighted]:inline-block [&>pre>code>.highlighted]:w-full [&>pre>code>.highlighted]:bg-(--highlight-color)!", "group-hover/left:[&>pre>code>:not(.focused)]:opacity-100! group-hover/left:[&>pre>code>:not(.focused)]:blur-none!", "group-hover/right:[&>pre>code>:not(.focused)]:opacity-100! group-hover/right:[&>pre>code>:not(.focused)]:blur-none!", "[&>pre>code>.add]:bg-[rgba(16,185,129,.16)] [&>pre>code>.remove]:bg-[rgba(244,63,94,.16)]", "group-hover/left:[&>pre>code>:not(.focused)]:transition-all group-hover/left:[&>pre>code>:not(.focused)]:duration-300", "group-hover/right:[&>pre>code>:not(.focused)]:transition-all group-hover/right:[&>pre>code>:not(.focused)]:duration-300" )} dangerouslySetInnerHTML={{ __html: highlighted }} /> ) } else { return (

          {code}

) } } return (

div>pre>code>:not(.focused)]:opacity-50! [&>div>pre>code>:not(.focused)]:blur-[0.095rem]!", "[&>div>pre>code>:not(.focused)]:transition-all [&>div>pre>code>:not(.focused)]:duration-300" )} >

{filename} before

{renderCode(beforeCode, highlightedBefore)}

div>pre>code>:not(.focused)]:opacity-50! [&>div>pre>code>:not(.focused)]:blur-[0.095rem]!", "[&>div>pre>code>:not(.focused)]:transition-all [&>div>pre>code>:not(.focused)]:duration-300" )} >

{filename} after

{renderCode(afterCode, highlightedAfter)}

) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","shiki",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/shiki","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"shiki"}]]}]}],["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next-themes"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/magicui/code-comparison.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]