feat(multi-line): added support for multi-line in ui

frontend/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useLeaveConfirm } from "./useLeaveConfirm";
 export { usePersistentState } from "./usePersistentState";
 export { usePopUp } from "./usePopUp";
+export { useSyntaxHighlight } from "./useSyntaxHighlight";
 export { useToggle } from "./useToggle";

frontend/src/hooks/useSyntaxHighlight.tsx

@@ -0,0 +1,45 @@
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useCallback } from "react";
+
+const REGEX = /([$]{.*?})/g;
+
+export const useSyntaxHighlight = () => {
+  const syntaxHighlight = useCallback((text: string, isHidden?: boolean) => {
+    if (isHidden) {
+      return text
+        .split("")
+        .slice(0, 200)
+        .map((el, i) =>
+          el === "\n" ? (
+            el
+          ) : (
+            <FontAwesomeIcon
+              key={`${text}_${el}_${i + 1}`}
+              className="mr-0.5 text-xxs"
+              icon={faCircle}
+            />
+          )
+        );
+    }
+
+    // append a space on last new line this to show new line in ui for code component
+    const val = text.at(-1) === "\n" ? text.concat(" ") : text;
+    if (val?.length === 0) return <span className="font-mono text-bunker-400/80">EMPTY</span>;
+    return val?.split(REGEX).map((word, i) =>
+      word.match(REGEX) !== null ? (
+        <span className="ph-no-capture text-yellow" key={`${val}-${i + 1}`}>
+          $&#123;
+          <span className="ph-no-capture text-yellow-200/80">{word.slice(2, word.length - 1)}</span>
+          &#125;
+        </span>
+      ) : (
+        <span key={`${word}_${i + 1}`} className="ph-no-capture">
+          {word}
+        </span>
+      )
+    );
+  }, []);
+
+  return syntaxHighlight;
+};