Spaces:
Running
Running
File size: 6,066 Bytes
6c6ae77 | 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 | import React from 'react';
const DeviceInfoModal = ({ device, onClose }) => {
if (!device) return null;
return (
<div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onClick={onClose}></div>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{device.name} Details
</h3>
<button onClick={onClose} className="text-gray-400 hover:text-gray-500 focus:outline-none">
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="mt-4 space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<span className="text-sm font-medium text-gray-500 block">Model</span>
<span className="text-sm text-gray-900">{device.model || 'Unknown'}</span>
</div>
<div>
<span className="text-sm font-medium text-gray-500 block">Generation</span>
<span className="text-sm text-gray-900">{device.generation || 'Unknown'}</span>
</div>
<div>
<span className="text-sm font-medium text-gray-500 block">Serial Number</span>
<span className="text-sm text-gray-900 font-mono">{device.serialNumber}</span>
</div>
<div>
<span className="text-sm font-medium text-gray-500 block">Firmware Version</span>
<span className="text-sm text-gray-900">{device.firmware || 'Unknown'}</span>
</div>
<div>
<span className="text-sm font-medium text-gray-500 block">Connection Type</span>
<span className="text-sm text-gray-900">Lightning</span>
</div>
<div>
<span className="text-sm font-medium text-gray-500 block">Connection Time</span>
<span className="text-sm text-gray-900">{device.connectionTime}</span>
</div>
<div>
<span className="text-sm font-medium text-gray-500 block">Battery Level</span>
<span className="text-sm text-gray-900">{device.battery ? `${device.battery}%` : 'N/A'}</span>
</div>
<div>
<span className="text-sm font-medium text-gray-500 block">Device Status</span>
<span className={`text-sm font-medium ${
device.status === 'charging' ? 'text-yellow-600' :
device.status === 'syncing' ? 'text-blue-600' :
device.status === 'connected' ? 'text-green-600' : 'text-gray-600'
}`}>
{device.status || 'Unknown'}
</span>
</div>
</div>
<div className="pt-4 border-t border-gray-100">
<h4 className="text-sm font-medium text-gray-900 mb-2">Device Capabilities</h4>
<div className="flex flex-wrap gap-2">
{device.capabilities?.map((cap, index) => (
<span key={index} className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
{cap}
</span>
))}
{(!device.capabilities || device.capabilities.length === 0) && (
<span className="text-sm text-gray-500">No capabilities detected</span>
)}
</div>
</div>
<div className="pt-4 border-t border-gray-100">
<h4 className="text-sm font-medium text-gray-900 mb-2">Device Notes</h4>
<textarea
className="block w-full sm:text-sm rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
rows="3"
placeholder="Add notes about this device..."
defaultValue={device.notes || ''}
></textarea>
</div>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
>
Close
</button>
</div>
</div>
</div>
</div>
);
}; |