39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { AlertTriangle, CircleGauge, TrendingDown, TrendingUp } from 'lucide-react';
|
|
import type { DailyMileageReport } from '../api';
|
|
|
|
function InsightIcon({ tone }: { tone: string }) {
|
|
if (tone === 'positive') return <TrendingUp size={16} />;
|
|
if (tone === 'critical') return <AlertTriangle size={16} />;
|
|
if (tone === 'warning') return <TrendingDown size={16} />;
|
|
return <CircleGauge size={16} />;
|
|
}
|
|
|
|
export default function ReportInsights({
|
|
insights,
|
|
}: {
|
|
insights: DailyMileageReport['insights'];
|
|
}) {
|
|
return (
|
|
<section className="grid grid-cols-2 gap-px overflow-hidden rounded-xl border border-slate-200 bg-slate-200 xl:grid-cols-4">
|
|
{insights.map(insight => {
|
|
const toneClass = insight.tone === 'positive'
|
|
? 'text-emerald-600 bg-emerald-50'
|
|
: insight.tone === 'critical'
|
|
? 'text-rose-600 bg-rose-50'
|
|
: insight.tone === 'warning'
|
|
? 'text-amber-600 bg-amber-50'
|
|
: 'text-blue-600 bg-blue-50';
|
|
return (
|
|
<div key={`${insight.title}-${insight.detail}`} className="flex min-h-[96px] gap-2.5 bg-white p-3 xl:min-h-[88px]">
|
|
<span className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${toneClass}`}><InsightIcon tone={insight.tone} /></span>
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-black text-slate-800">{insight.title}</div>
|
|
<div className="mt-1 text-[10px] font-bold leading-relaxed text-slate-500">{insight.detail}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</section>
|
|
);
|
|
}
|