1 files changed, 57 insertions, 0 deletions
diff --git a/frontend/components/prism/RatiosPage.tsx b/frontend/components/prism/RatiosPage.tsx
new file mode 100644
index 0000000..26868f8
--- /dev/null
+++ b/frontend/components/prism/RatiosPage.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+import { RatiosCard } from "@/components/prism/RatiosCard";
+import type { RatiosResponse } from "@/types/api";
+
+type RatiosState = "loading" | "ready" | "error";
+
+type Props = {
+  ticker: string;
+};
+
+export function RatiosPage({ ticker }: Props) {
+  const [data, setData] = useState<RatiosResponse | null>(null);
+  const [ratiosState, setRatiosState] = useState<RatiosState>("loading");
+
+  useEffect(() => {
+    let cancelled = false;
+    setRatiosState("loading");
+    setData(null);
+
+    api
+      .ratios(ticker)
+      .then((res) => {
+        if (!cancelled) {
+          setData(res);
+          setRatiosState("ready");
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setRatiosState("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [ticker]);
+
+  if (ratiosState === "loading") {
+    return <section className="psm-card psm-skeleton" style={{ minHeight: 320 }} />;
+  }
+
+  if (ratiosState === "error") {
+    return (
+      <section className="psm-card">
+        <p className="psm-muted-copy">Ratio data unavailable for {ticker}.</p>
+      </section>
+    );
+  }
+
+  if (ratiosState === "ready" && data) {
+    return <RatiosCard data={data} />;
+  }
+
+  return null;
+}