Create OutputPanel.tsx

frontend/src/components/OutputPanel.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+type Props = {
+  data: any | null;
+};
+
+export default function OutputPanel({ data }: Props) {
+  if (!data) return null;
+  if (data.error) return <div style={{ color: "crimson" }}>Error: {data.error}</div>;
+
+  return (
+    <div style={{ marginTop: 16, padding: 16, border: "1px solid #eee", borderRadius: 12 }}>
+      <h3 style={{ marginTop: 0 }}>結果</h3>
+      <div><strong>件名:</strong> {data.subject}</div>
+      <div style={{ whiteSpace: "pre-wrap", marginTop: 8 }}>{data.body}</div>
+      <div style={{ marginTop: 12, opacity: 0.8 }}>
+        <div>toxicity: {data.quality?.toxicity?.toFixed?.(3)}</div>
+        <div>sentiment: {data.quality?.sentiment?.toFixed?.(3)}</div>
+        {data.warnings?.length ? (
+          <ul>{data.warnings.map((w: string, i: number) => <li key={i}>{w}</li>)}</ul>
+        ) : null}
+        {data.lint?.issues?.length ? (
+          <>
+            <div style={{ marginTop: 8 }}><strong>Lint:</strong></div>
+            <ul>{data.lint.issues.map((w: string, i: number) => <li key={i}>{w}</li>)}</ul>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}