39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import type { Device, DeviceStatus } from '@/mocks/mdmDashboardData'
|
|
|
|
const statusConfig: Record<DeviceStatus, { dot: string; text: string }> = {
|
|
online: { dot: 'bg-green-500', text: 'text-green-400' },
|
|
offline: { dot: 'bg-red-500', text: 'text-red-400' },
|
|
kiosk: { dot: 'bg-blue-500', text: 'text-blue-400' },
|
|
}
|
|
|
|
const statusLabel: Record<DeviceStatus, string> = {
|
|
online: 'Online',
|
|
offline: 'Offline',
|
|
kiosk: 'Kiosk',
|
|
}
|
|
|
|
interface DeviceItemProps {
|
|
device: Device
|
|
}
|
|
|
|
export default function DeviceItem({ device }: DeviceItemProps) {
|
|
const config = statusConfig[device.status]
|
|
return (
|
|
<div className="flex items-center justify-between border-b border-white/5 py-3 last:border-b-0 transition-colors hover:bg-white/5">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="font-medium text-gray-200">{device.name}</p>
|
|
<p className="mt-0.5 text-sm text-gray-500">
|
|
Android {device.androidVersion} · Batería {device.batteryPercent}%
|
|
</p>
|
|
</div>
|
|
<span className={cn('ml-4 inline-flex items-center gap-1.5 text-sm shrink-0', config.text)}>
|
|
<span className={cn('h-2 w-2 rounded-full', config.dot)} />
|
|
{statusLabel[device.status]}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|