Spaces:
Running
Running
File size: 2,838 Bytes
78d3210 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import React from 'react';
const DeviceStats = ({ devices }) => {
const stats = {
total: devices.length,
charging: devices.filter(d => d.status === 'charging').length,
connected: devices.filter(d => d.status === 'connected').length,
syncing: devices.filter(d => d.status === 'syncing').length,
};
const StatCard = ({ title, value, icon, color }) => (
<div className="bg-white overflow-hidden rounded-xl shadow-sm border border-gray-100 p-5">
<div className="flex items-center">
<div className={`flex-shrink-0 rounded-md p-3 ${color}`}>
{icon}
</div>
<div className="ml-5 w-0 flex-1">
<dl>
<dt className="text-sm font-medium text-gray-500 truncate">{title}</dt>
<dd>
<div className="text-3xl font-semibold text-gray-900">{value}</div>
</dd>
</dl>
</div>
</div>
</div>
);
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
<StatCard
title="Total Devices"
value={stats.total}
color="bg-blue-100"
icon={
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
}
/>
<StatCard
title="Charging"
value={stats.charging}
color="bg-yellow-100"
icon={
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
}
/>
<StatCard
title="Connected"
value={stats.connected}
color="bg-green-100"
icon={
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
}
/>
<StatCard
title="Syncing"
value={stats.syncing}
color="bg-purple-100"
icon={
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
}
/>
</div>
);
}; |