86 lines
4.0 KiB
TypeScript
86 lines
4.0 KiB
TypeScript
import type { StockAIAnalysis } from '@/lib/actions/stock-analysis.helpers';
|
|
|
|
interface StockAIAnalysisCardProps {
|
|
analysis: StockAIAnalysis | null;
|
|
}
|
|
|
|
function getStanceClasses(stance: StockAIAnalysis['stance']) {
|
|
if (stance === 'Bullish') return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300';
|
|
if (stance === 'Bearish') return 'border-rose-500/30 bg-rose-500/10 text-rose-300';
|
|
return 'border-amber-500/30 bg-amber-500/10 text-amber-200';
|
|
}
|
|
|
|
function renderList(title: string, items: string[]) {
|
|
return (
|
|
<div className="rounded-xl border border-gray-800 bg-black/20 p-4">
|
|
<h3 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-400">{title}</h3>
|
|
{items.length ? (
|
|
<ul className="mt-3 space-y-3">
|
|
{items.map((item) => (
|
|
<li key={item} className="flex gap-3 text-sm text-gray-200">
|
|
<span className="mt-2 h-1.5 w-1.5 rounded-full bg-yellow-400" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="mt-3 text-sm text-gray-400">No additional signals generated.</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function StockAIAnalysisCard({ analysis }: StockAIAnalysisCardProps) {
|
|
if (!analysis) {
|
|
return (
|
|
<section className="rounded-2xl border border-gray-800 bg-gray-950/40 p-5 backdrop-blur-sm">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-gray-500">AI Stock Analysis</p>
|
|
<h2 className="mt-2 text-xl font-semibold text-white">Professional research note unavailable</h2>
|
|
<p className="mt-3 text-sm leading-6 text-gray-400">
|
|
The stock dashboard data loaded, but an AI research note could not be generated right now.
|
|
</p>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-2xl border border-gray-800 bg-gray-950/40 p-5 backdrop-blur-sm">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-gray-500">
|
|
AI Stock Analysis
|
|
</p>
|
|
<h2 className="mt-2 text-xl font-semibold text-white">
|
|
{analysis.companyName ? `${analysis.companyName} (${analysis.symbol})` : analysis.symbol}
|
|
</h2>
|
|
<p className="mt-2 text-sm leading-6 text-gray-300">{analysis.summary}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<span
|
|
className={`rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] ${getStanceClasses(analysis.stance)}`}
|
|
>
|
|
{analysis.stance}
|
|
</span>
|
|
<span className="rounded-full border border-gray-700 bg-black/20 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-gray-200">
|
|
{analysis.confidence} confidence
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
|
{renderList('Key drivers', analysis.keyDrivers)}
|
|
{renderList('Risks', analysis.risks)}
|
|
{renderList('What to watch', analysis.watchItems)}
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">
|
|
Educational analysis only. Use it as a synthesis of the dashboard inputs, not as personal
|
|
financial advice.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|