From 6a0cef6094829ede44ddf80d0611dd87d684068b Mon Sep 17 00:00:00 2001
From: Fernando <crespofernando05@gmail.com>
Date: Wed, 16 Apr 2025 22:20:52 -0400
Subject: [PATCH] Convert equation to math form

---
 calc-frontend/package-lock.json               | 40 +++++++++++++++++++
 calc-frontend/package.json                    |  2 +
 .../src/components/ui/FunctionCard.tsx        |  6 ++-
 calc-frontend/src/types/react-katex.d.ts      | 16 ++++++++
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 calc-frontend/src/types/react-katex.d.ts

diff --git a/calc-frontend/package-lock.json b/calc-frontend/package-lock.json
index 7c5a677..0042e7f 100644
--- a/calc-frontend/package-lock.json
+++ b/calc-frontend/package-lock.json
@@ -18,12 +18,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",
@@ -3603,6 +3605,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5277,6 +5288,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -9364,6 +9391,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-katex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-katex/-/react-katex-3.0.1.tgz",
+      "integrity": "sha512-wIUW1fU5dHlkKvq4POfDkHruQsYp3fM8xNb/jnc8dnQ+nNCnaj0sx5pw7E6UyuEdLRyFKK0HZjmXBo+AtXXy0A==",
+      "license": "MIT",
+      "dependencies": {
+        "katex": "^0.16.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.8.1",
+        "react": ">=15.3.2 <=18"
+      }
+    },
     "node_modules/react-loader-spinner": {
       "version": "6.1.6",
       "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz",
diff --git a/calc-frontend/package.json b/calc-frontend/package.json
index b45c9be..2c8e998 100644
--- a/calc-frontend/package.json
+++ b/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",
diff --git a/calc-frontend/src/components/ui/FunctionCard.tsx b/calc-frontend/src/components/ui/FunctionCard.tsx
index 8b57ed3..02986f2 100644
--- a/calc-frontend/src/components/ui/FunctionCard.tsx
+++ b/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"}
diff --git a/calc-frontend/src/types/react-katex.d.ts b/calc-frontend/src/types/react-katex.d.ts
new file mode 100644
index 0000000..0f820c6
--- /dev/null
+++ b/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;
+  }
\ No newline at end of file