46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import DashboardLayout from '../adminDashboard/dashlayout';
|
|
import SiteCard from '@/components/dashboards/SiteCard'; // Import the new SiteCard component
|
|
import { mockSiteData, SiteName } from '@/types/SiteData'; // Import your mock data and SiteName type
|
|
|
|
const SitesPage = () => {
|
|
// Helper function to determine status (can be externalized if used elsewhere)
|
|
const getSiteStatus = (siteName: SiteName): string => {
|
|
const statusMap: Record<SiteName, string> = {
|
|
'Site A': 'Active',
|
|
'Site B': 'Inactive',
|
|
'Site C': 'Faulty',
|
|
};
|
|
return statusMap[siteName];
|
|
};
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="p-6 space-y-6">
|
|
<h1 className="text-2xl font-bold mb-6 dark:text-white-light">All Sites Overview</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* Iterate over the keys of mockSiteData (which are your SiteNames) */}
|
|
{Object.keys(mockSiteData).map((siteNameKey) => {
|
|
const siteName = siteNameKey as SiteName; // Cast to SiteName type
|
|
const siteDetails = mockSiteData[siteName];
|
|
const siteStatus = getSiteStatus(siteName);
|
|
|
|
return (
|
|
<SiteCard
|
|
key={siteName} // Important for React list rendering
|
|
siteName={siteName}
|
|
details={siteDetails}
|
|
status={siteStatus}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
};
|
|
|
|
export default SitesPage; |