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