Spaces:
Running
Running
| 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> | |
| ); | |
| }; |