Spaces:
Running
Running
| import React from 'react'; | |
| import DeviceCard from './DeviceCard'; | |
| const DeviceList = ({ devices, onAction }) => { | |
| if (!devices || devices.length === 0) { | |
| return ( | |
| <div className="text-center py-16 bg-white rounded-xl shadow-sm border border-gray-100"> | |
| <div className="mx-auto h-24 w-24 text-gray-300 mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 className="text-lg font-medium text-gray-900">No Devices Connected</h3> | |
| <p className="mt-1 text-sm text-gray-500">Connect a device via Lightning cable to see details here.</p> | |
| <div className="mt-6"> | |
| <button | |
| onClick={() => window.location.reload()} | |
| className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" | |
| > | |
| <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" /> | |
| </svg> | |
| Refresh Device List | |
| </button> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| {devices.map((device) => ( | |
| <DeviceCard key={device.id} device={device} onAction={onAction} /> | |
| ))} | |
| </div> | |
| ); | |
| }; |