67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { ScheduleInfluencingFactors } from '../../types';
|
|
import { formatNumber } from '../../utils/formatters.ts';
|
|
|
|
const statusStyles = {
|
|
ok: 'text-green-600',
|
|
warning: 'text-yellow-600',
|
|
critical: 'text-red-600',
|
|
};
|
|
|
|
const FactorCard: React.FC<{
|
|
icon: string;
|
|
label: string;
|
|
value: number;
|
|
unit: string;
|
|
status: 'ok' | 'warning' | 'critical';
|
|
}> = ({ icon, label, value, unit, status }) => (
|
|
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
|
|
<div className={`text-2xl w-8 text-center ${statusStyles[status]}`}>
|
|
<i className={`fa-solid ${icon}`}></i>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-500 font-medium">{label}</p>
|
|
<p className="font-bold text-gray-800">
|
|
{formatNumber(value)} {unit}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
interface InfluencingFactorsProps {
|
|
factors: ScheduleInfluencingFactors;
|
|
}
|
|
|
|
const InfluencingFactors: React.FC<InfluencingFactorsProps> = ({ factors }) => {
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-xl font-bold mb-4">Faktor-faktor Pengaruh</h2>
|
|
<div className="space-y-3">
|
|
<FactorCard
|
|
icon="fa-temperature-high"
|
|
label="Suhu Lingkungan"
|
|
value={factors.temperature.value}
|
|
unit={factors.temperature.unit}
|
|
status={factors.temperature.status}
|
|
/>
|
|
<FactorCard
|
|
icon="fa-droplet"
|
|
label="Kelembapan"
|
|
value={factors.humidity.value}
|
|
unit={factors.humidity.unit}
|
|
status={factors.humidity.status}
|
|
/>
|
|
<FactorCard
|
|
icon="fa-person-running"
|
|
label="Tingkat Aktivitas"
|
|
value={factors.activityLevel.value}
|
|
unit={factors.activityLevel.unit}
|
|
status={factors.activityLevel.status}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InfluencingFactors;
|