Code Comparison

1"use client"
2 
3import { useEffect, useMemo, useState } from "react"
4import {
5  transformerNotationDiff,
6  transformerNotationFocus,
7} from "@shikijs/transformers"
8import { FileIcon } from "lucide-react"
9import { useTheme } from "next-themes"
10 
11import { cn } from "@/lib/utils"
12 
13interface CodeComparisonProps {
14  beforeCode: string
15  afterCode: string
16  language: string
17  filename: string
18  lightTheme: string
19  darkTheme: string
20  highlightColor?: string
21}
22 
23export function CodeComparison({
24  beforeCode,
25  afterCode,
26  language,
27  filename,
28  lightTheme,
29  darkTheme,
30  highlightColor = "#ff3333",
31}: CodeComparisonProps) {
32  const { theme, systemTheme } = useTheme()
33  const [highlightedBefore, setHighlightedBefore] = useState("")
34  const [highlightedAfter, setHighlightedAfter] = useState("")
35  const [hasLeftFocus, setHasLeftFocus] = useState(false)
36  const [hasRightFocus, setHasRightFocus] = useState(false)
37 
38  const selectedTheme = useMemo(() => {
39    const currentTheme = theme === "system" ? systemTheme : theme
40    return currentTheme === "dark" ? darkTheme : lightTheme
41  }, [theme, systemTheme, darkTheme, lightTheme])
42 
43  useEffect(() => {
44    if (highlightedBefore || highlightedAfter) {
45      setHasLeftFocus(highlightedBefore.includes('class="line focused"'))
46      setHasRightFocus(highlightedAfter.includes('class="line focused"'))
47    }
48  }, [highlightedBefore, highlightedAfter])
49 
50  useEffect(() => {
51    async function highlightCode() {
52      try {
53        const { codeToHtml } = await import("shiki")
54        const { transformerNotationHighlight } =
55          await import("@shikijs/transformers")
56 
57        const before = await codeToHtml(beforeCode, {
58          lang: language,
59          theme: selectedTheme,
60          transformers: [
61            transformerNotationHighlight({ matchAlgorithm: "v3" }),
62            transformerNotationDiff({ matchAlgorithm: "v3" }),
63            transformerNotationFocus({ matchAlgorithm: "v3" }),
64          ],
65        })
66        const after = await codeToHtml(afterCode, {
67          lang: language,
68          theme: selectedTheme,
69          transformers: [
70            transformerNotationHighlight({ matchAlgorithm: "v3" }),
71            transformerNotationDiff({ matchAlgorithm: "v3" }),
72            transformerNotationFocus({ matchAlgorithm: "v3" }),
73          ],
74        })
75        setHighlightedBefore(before)
76        setHighlightedAfter(after)
77      } catch (error) {
78        console.error("Error highlighting code:", error)
79// … truncated