64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { BehaviorMetrics } from '../../types.ts';
|
|
|
|
const StatItem: React.FC<{
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
valueColor?: string;
|
|
}> = ({ icon, label, value, valueColor = 'text-gray-900' }) => (
|
|
<div className="flex items-center p-2 rounded-lg hover:bg-gray-50">
|
|
<div className="text-xl text-gray-400 w-10">{icon}</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600 font-medium">{label}</p>
|
|
<p className={`text-xl font-bold ${valueColor}`}>{value}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const statusStyles = {
|
|
ok: 'text-green-600',
|
|
warning: 'text-yellow-600',
|
|
critical: 'text-red-600',
|
|
};
|
|
|
|
interface BehaviorSummaryProps {
|
|
metrics: BehaviorMetrics;
|
|
}
|
|
|
|
const BehaviorSummary: React.FC<BehaviorSummaryProps> = ({ metrics }) => {
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-xl font-bold mb-4">Ringkasan Status Perilaku</h2>
|
|
<div className="space-y-3">
|
|
<StatItem
|
|
icon={<i className="fa-solid fa-person-running"></i>}
|
|
label="Indeks Aktivitas"
|
|
value={`${metrics.activityIndex}%`}
|
|
valueColor={metrics.activityIndex > 70 ? 'text-green-600' : 'text-yellow-600'}
|
|
/>
|
|
<StatItem
|
|
icon={<i className="fa-solid fa-heart-pulse"></i>}
|
|
label="Tingkat Stres"
|
|
value={`${metrics.stressLevel.value}%`}
|
|
valueColor={statusStyles[metrics.stressLevel.status]}
|
|
/>
|
|
<StatItem
|
|
icon={<i className="fa-solid fa-utensils"></i>}
|
|
label="Pola Makan"
|
|
value={`${metrics.eatingPattern.value}% Normal`}
|
|
valueColor={statusStyles[metrics.eatingPattern.status]}
|
|
/>
|
|
<StatItem
|
|
icon={<i className="fa-solid fa-glass-water"></i>}
|
|
label="Pola Minum"
|
|
value={`${metrics.drinkingPattern.value}% Normal`}
|
|
valueColor={statusStyles[metrics.drinkingPattern.status]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BehaviorSummary;
|