Spaces:
Running
Running
| import React from 'react'; | |
| const DeviceCard = ({ device, onAction }) => { | |
| const getDeviceIcon = (type) => { | |
| switch (type) { | |
| case 'iPhone': | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | |
| <rect x="5" y="2" width="14" height="20" rx="2" ry="2" /> | |
| <line x1="12" y1="18" x2="12.01" y2="18" /> | |
| </svg> | |
| ); | |
| case 'iPad': | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | |
| <rect x="4" y="2" width="16" height="20" rx="2" ry="2" /> | |
| <line x1="12" y1="18" x2="12.01" y2="18" /> | |
| </svg> | |
| ); | |
| case 'iPod': | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | |
| <rect x="4" y="4" width="16" height="16" rx="4" ry="4" /> | |
| <circle cx="12" cy="12" r="3" /> | |
| </svg> | |
| ); | |
| case 'iPod Touch': | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | |
| <rect x="4" y="4" width="16" height="16" rx="4" ry="4" /> | |
| <circle cx="12" cy="12" r="3" /> | |
| </svg> | |
| ); | |
| case 'iPod Nano': | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | |
| <rect x="4" y="6" width="16" height="12" rx="2" ry="2" /> | |
| <line x1="12" y1="12" x2="12.01" y2="12" /> | |
| </svg> | |
| ); | |
| default: | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | |
| <path d="M18 8h1a4 4 0 0 1 0 8h-1" /> | |
| <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" /> | |
| <line x1="6" y1="1" x2="6" y2="4" /> | |
| <line x1="10" y1="1" x2="10" y2="4" /> | |
| <line x1="14" y1="1" x2="14" y2="4" /> | |
| </svg> | |
| ); | |
| } | |
| }; | |
| const getDeviceColor = (type) => { | |
| if (type.includes('iPhone')) return 'border-blue-500 shadow-blue-200'; | |
| if (type.includes('iPad')) return 'border-gray-400 shadow-gray-200'; | |
| if (type.includes('iPod')) return 'border-purple-500 shadow-purple-200'; | |
| return 'border-gray-300 shadow-gray-200'; | |
| }; | |
| const getDeviceStatus = (status) => { | |
| switch (status) { | |
| case 'connected': | |
| return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Connected</span>; | |
| case 'charging': | |
| return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Charging</span>; | |
| case 'syncing': | |
| return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Syncing</span>; | |
| case 'paused': | |
| return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Paused</span>; | |
| default: | |
| return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Unknown</span>; | |
| } | |
| }; | |
| return ( | |
| <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-200"> | |
| <div className="p-6"> | |
| <div className="flex items-start justify-between"> | |
| <div className="flex items-center"> | |
| <div className={`flex-shrink-0 h-12 w-12 rounded-lg ${getDeviceColor(device.type)} flex items-center justify-center text-gray-700`}> | |
| {getDeviceIcon(device.type)} | |
| </div> | |
| <div className="ml-4"> | |
| <h3 className="text-lg font-semibold text-gray-900">{device.name}</h3> | |
| <p className="text-sm text-gray-500">{device.serialNumber}</p> | |
| <div className="mt-1 flex items-center"> | |
| <span className="text-xs text-gray-400 mr-2">Generated: {device.generation || 'Unknown'}</span> | |
| <span className="text-xs text-gray-300">•</span> | |
| <span className="text-xs text-gray-400 ml-2">Connected: {device.connectionTime}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="flex flex-col items-end"> | |
| {getDeviceStatus(device.status)} | |
| {device.battery && ( | |
| <div className="mt-2 flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-400 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fillRule="evenodd" d="M3 6a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm1 3a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1zm6-1a1 1 0 100 2h5a1 1 0 100-2H11zm-3 5a1 1 0 011-1h3a1 1 0 110 2H11a1 1 0 01-1-1z" clipRule="evenodd" /> | |
| </svg> | |
| <span className="text-sm font-medium text-gray-700">{device.battery}%</span> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| <div className="mt-4 space-y-2"> | |
| <div className="grid grid-cols-2 gap-3"> | |
| {device.actions?.map((action, index) => ( | |
| <button | |
| key={index} | |
| onClick={() => onAction(device, action.name)} | |
| className={`flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors ${ | |
| action.danger | |
| ? 'bg-red-50 text-red-700 hover:bg-red-100' | |
| : 'bg-blue-50 text-blue-700 hover:bg-blue-100' | |
| }`} | |
| > | |
| {action.icon && <span className="mr-1.5">{action.icon}</span>} | |
| {action.name} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| <div className="mt-4 pt-4 border-t border-gray-100"> | |
| <div className="grid grid-cols-2 gap-4 text-sm"> | |
| <div> | |
| <span className="text-gray-500 block">Model</span> | |
| <span className="text-gray-900 font-medium">{device.model || 'Unknown'}</span> | |
| </div> | |
| <div> | |
| <span className="text-gray-500 block">Firmware</span> | |
| <span className="text-gray-900 font-medium">{device.firmware || 'Unknown'}</span> | |
| </div> | |
| <div> | |
| <span className="text-gray-500 block">Connection Type</span> | |
| <span className="text-gray-900 font-medium">Lightning</span> | |
| </div> | |
| <div> | |
| <span className="text-gray-500 block">Connection Time</span> | |
| <span className="text-gray-900 font-medium">{device.connectionTime}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; |