"use client" import { FileIcon } from "lucide-react" import { useTheme } from "next-themes" import { useEffect, useState } from "react" import { codeToHtml } from "shiki" interface CodeComparisonProps { beforeCode: string afterCode: string language: string filename: string lightTheme: string darkTheme: string } export function CodeComparison({ beforeCode, afterCode, language, filename, lightTheme, darkTheme, }: CodeComparisonProps) { const { theme, systemTheme } = useTheme() const [highlightedBefore, setHighlightedBefore] = useState("") const [highlightedAfter, setHighlightedAfter] = useState("") useEffect(() => { const currentTheme = theme === "system" ? systemTheme : theme const selectedTheme = currentTheme === "dark" ? darkTheme : lightTheme async function highlightCode() { const before = await codeToHtml(beforeCode, { lang: language, theme: selectedTheme, }) const after = await codeToHtml(afterCode, { lang: language, theme: selectedTheme, }) setHighlightedBefore(before) setHighlightedAfter(after) } highlightCode() }, [ theme, systemTheme, beforeCode, afterCode, language, lightTheme, darkTheme, ]) const renderCode = (code: string, highlighted: string) => { if (highlighted) { return (

) } else { return (

          {code}

) } } return (

{filename} before

{renderCode(beforeCode, highlightedBefore)}

{filename} after

{renderCode(afterCode, highlightedAfter)}

) }