Almost all sections with mock data

src/components/headwind/DeviceItem.tsx

@@ -0,0 +1,38 @@
+'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>
+  )
+}