Convert equation to math form

calc-frontend/package.json

@@ -21,12 +21,14 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jsdom": "^26.0.0",
+    "katex": "^0.16.22",
     "lucide-react": "^0.483.0",
     "next-themes": "^0.4.6",
     "npm": "^11.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
+    "react-katex": "^3.0.1",
     "react-loader-spinner": "^6.1.6",
     "react-markdown": "^10.1.0",
     "react-router": "^7.1.5",

calc-frontend/src/components/ui/FunctionCard.tsx

@@ -1,6 +1,8 @@
 import axios from "axios";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
+import { InlineMath } from "react-katex";
+import "katex/dist/katex.min.css";
 
 interface FunctionCardProps {
   topic: string;
@@ -42,7 +44,9 @@ function FunctionCard({
 
   return (
     <div className="bg-[#f6f6f7] p-4 pt-2 rounded-2xl shadow-md text-center w-[240px]">
-      <p className="text-xl mb-2">{equation}</p>
+      <p className="text-xl mb-2">
+        <InlineMath>{equation}</InlineMath>
+      </p>
       <img
         src={""}
         alt={topic + " graph"}

calc-frontend/src/types/react-katex.d.ts

@@ -0,0 +1,16 @@
+declare module "react-katex" {
+    import * as React from "react";
+
+    interface KatexProps {
+      children?: string;
+      math?: string;
+      errorColor?: string;
+      renderError?: (error: Error) => React.ReactNode;
+    }
+
+    const InlineMath: React.FC<KatexProps>;
+    const BlockMath: React.FC<KatexProps>;
+
+    export { InlineMath, BlockMath };
+    export default InlineMath;
+  }