feat: added comparator diff component

Author: KoolTheba

src/components/ComparatorDiff.tsx

@@ -0,0 +1,25 @@
+import * as Diff from "diff";
+import "../styles/ComparatorDiff.css";
+
+type Props = {
+  previous: string;
+  current: string;
+};
+
+export const ComparatorDiff = (props: Props) => {
+  const diff = Diff.diffWordsWithSpace(props.previous, props.current);
+  return (
+    <>
+      {diff.map((part: any, i: number) => (
+        <span
+          key={`${part.value}-${i}`}
+          className={
+            part.added ? "text-addition" : part.removed ? "text-removal" : ""
+          }
+        >
+          {part.value}
+        </span>
+      ))}
+    </>
+  );
+};

src/styles/ComparatorDiff.css

@@ -0,0 +1,9 @@
+.text-addition {
+  background-color: #acf2bd;
+}
+
+.text-removal {
+  background-color: #fdb8c0;
+  text-decoration: line-through;
+  text-decoration-thickness: -2px;
+}