Spaces:
Running
Running
File size: 7,328 Bytes
21889cd | 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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | 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>
);
}; |