Initial Commit

components/math/math-display.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import katex from "katex";
+
+interface MathDisplayProps {
+  math: string;
+  className?: string;
+}
+
+export function MathDisplay({ math, className }: MathDisplayProps) {
+  const html = katex.renderToString(math, {
+    displayMode: true,
+    throwOnError: false,
+  });
+
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+
+export function MathInline({ math, className }: MathDisplayProps) {
+  const html = katex.renderToString(math, {
+    displayMode: false,
+    throwOnError: false,
+  });
+
+  return (
+    <span
+      className={className}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}