File size: 2,492 Bytes
b8e6434 3139b66 b8e6434 3139b66 b8e6434 3139b66 b8e6434 3139b66 b8e6434 3139b66 b8e6434 3139b66 b8e6434 3139b66 b8e6434 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | "use client";
import { useState } from "react";
type Props = {
reportMarkdown: string;
};
export default function Reports({ reportMarkdown }: Props) {
const [message, setMessage] = useState("");
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(reportMarkdown);
setMessage("Report copied to clipboard.");
} catch {
setMessage("Unable to copy report.");
}
window.setTimeout(() => setMessage(""), 2000);
};
return (
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
<div className="glass-card rounded-[2rem] p-8 border border-white/10 flex flex-col gap-6 md:flex-row md:items-center md:justify-between relative overflow-hidden">
<div className="absolute top-0 right-0 w-32 h-32 bg-cyan/10 blur-[60px]" />
<div>
<h2 className="text-2xl font-bold text-white mb-2">Executive Intelligence Report</h2>
<p className="text-slate-500 text-sm">Exportable Markdown summary for decision makers and legal review.</p>
</div>
<button
type="button"
onClick={handleCopy}
disabled={!reportMarkdown}
className="rounded-2xl premium-gradient px-8 py-4 font-black text-xs uppercase tracking-widest text-white shadow-xl shadow-purple-500/20 transition hover:scale-105 active:scale-95 disabled:opacity-30"
>
Copy Report 📋
</button>
</div>
<div className="glass-card rounded-[2.5rem] border border-white/5 bg-slate-950/40 p-10 text-slate-300 min-h-[500px] shadow-2xl">
{reportMarkdown ? (
<div className="prose prose-invert max-w-none">
<pre className="whitespace-pre-wrap break-words text-slate-100 font-mono text-[13px] leading-relaxed p-6 rounded-2xl bg-black/20 border border-white/5">
{reportMarkdown}
</pre>
</div>
) : (
<div className="flex flex-col items-center justify-center h-full text-slate-500 py-20">
<div className="text-4xl mb-4 opacity-20">📋</div>
<p className="text-sm font-medium tracking-tight">Complete an agentic analysis to compile the final report.</p>
</div>
)}
</div>
{message && (
<div className="fixed bottom-8 right-8 rounded-2xl bg-cyan px-6 py-3 text-sm font-semibold text-slate-950 shadow-xl transition-all animate-bounce">
{message}
</div>
)}
</div>
);
}
|