refactor(tsx): convert Diff to tsx

Author: fabiovincenzi

package-lock.json

@@ -92,6 +92,7 @@
     "@types/lodash": "^4.17.15",
     "@types/mocha": "^10.0.10",
     "@types/node": "^22.13.5",
+    "@types/react-html-parser": "^2.0.7",
     "@types/react-dom": "^17.0.11",
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.29.0",

package.json

@@ -0,0 +1,19 @@
+import * as Diff2Html from 'diff2html';
+import reactHtmlParser from 'react-html-parser'; // Renamed to follow function naming conventions
+import React from 'react';
+
+interface DiffProps {
+  diff: string;
+}
+
+const Diff: React.FC<DiffProps> = ({ diff }) => {
+  const outputHtml = Diff2Html.html(diff, {
+    drawFileList: true,
+    matching: 'lines',
+    outputFormat: 'side-by-side',
+  });
+
+  return <>{reactHtmlParser(outputHtml)}</>;
+};
+
+export default Diff;