68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
export type SiteName = 'Site A' | 'Site B' | 'Site C';
|
|
|
|
interface SiteStatusProps {
|
|
selectedSite: SiteName;
|
|
location: string;
|
|
inverterProvider: string;
|
|
emergencyContact: string;
|
|
lastSyncTimestamp: string;
|
|
}
|
|
|
|
const SiteStatus = ({
|
|
selectedSite,
|
|
location,
|
|
inverterProvider,
|
|
emergencyContact,
|
|
lastSyncTimestamp,
|
|
}: SiteStatusProps) => {
|
|
const statusMap: Record<SiteName, string> = {
|
|
'Site A': 'Active',
|
|
'Site B': 'Inactive',
|
|
'Site C': 'Faulty',
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-gray-800 dark:text-white-light">
|
|
<h2 className="text-xl font-semibold mb-3">Site Details</h2>
|
|
|
|
{/* Status */}
|
|
<div className="flex justify-between items-center text-base">
|
|
<p className="text-gray-600 dark:text-gray-400 font-medium">Status:</p>
|
|
<p className={`font-semibold ${
|
|
statusMap[selectedSite] === 'Active' ? 'text-green-500' :
|
|
statusMap[selectedSite] === 'Inactive' ? 'text-orange-500' :
|
|
'text-red-500'
|
|
}`}>
|
|
{statusMap[selectedSite]}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Location */}
|
|
<div className="flex justify-between items-center text-base">
|
|
<p className="text-gray-600 dark:text-gray-400 font-medium">Location:</p>
|
|
<p className="font-medium">{location}</p>
|
|
</div>
|
|
|
|
{/* Inverter Provider */}
|
|
<div className="flex justify-between items-center text-base">
|
|
<p className="text-gray-600 dark:text-gray-400 font-medium">Inverter Provider:</p>
|
|
<p className="font-medium">{inverterProvider}</p>
|
|
</div>
|
|
|
|
{/* Emergency Contact */}
|
|
<div className="flex justify-between items-center text-base">
|
|
<p className="text-gray-600 dark:text-gray-400 font-medium">Emergency Contact:</p>
|
|
<p className="font-medium">{emergencyContact}</p>
|
|
</div>
|
|
|
|
{/* Last Sync */}
|
|
<div className="flex justify-between items-center text-base">
|
|
<p className="text-gray-600 dark:text-gray-400 font-medium">Last Sync:</p>
|
|
<p className="font-medium">{lastSyncTimestamp}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SiteStatus;
|