Publish LumaOps source

lumaops/frontend/src/components/DeviceCard.tsx

@@ -0,0 +1,27 @@
+import { Cpu, MemoryStick, Star, WifiOff } from "lucide-react";
+import type { CSSProperties } from "react";
+import { Link } from "react-router-dom";
+import type { Device } from "../api/types";
+import { colorToHex, formatDate } from "../lib/utils";
+import { Badge } from "./ui";
+
+interface DeviceCardProps {
+  device: Device;
+  list?: boolean;
+  moduleLabel?: string;
+}
+
+export function DeviceCard({ device, list = false, moduleLabel }: DeviceCardProps) {
+  const color = colorToHex(device.state.colors?.[0]);
+  const Icon = device.device_type === "dram" ? MemoryStick : Cpu;
+  return <Link to={`/devices/${device.id}`} className={list ? "device-row" : "device-card"}>
+    <div className="device-card__visual" style={{ "--device-color": color } as CSSProperties}>
+      <span className="device-glow" /><Icon size={list ? 22 : 30} /><span className={`presence ${device.online ? "presence--online" : ""}`} />
+    </div>
+    <div className="device-card__content">
+      <div className="device-card__title"><div><h2>{moduleLabel || device.alias || device.name}</h2><p>{[device.vendor, device.model].filter(Boolean).join(" · ") || device.source}</p></div>{device.favorite ? <Star size={16} className="favorite" fill="currentColor" /> : null}</div>
+      <div className="device-card__meta"><Badge tone={device.online ? "success" : "neutral"}>{device.online ? "Online" : <><WifiOff size={12} /> Offline</>}</Badge>{device.room_name ? <Badge>{device.room_name}</Badge> : null}{device.read_only ? <Badge tone="warning">Alleen lezen</Badge> : null}{device.blocked ? <Badge tone="danger">Geblokkeerd</Badge> : null}</div>
+      {!list ? <div className="device-card__footer"><span><i style={{ background: color }} />{device.state.mode ?? "Onbekende modus"}</span><span>{device.led_count} leds</span></div> : <div className="device-row__extra"><span>{device.state.brightness ?? "—"}%</span><span>{formatDate(device.last_detected_at)}</span></div>}
+    </div>
+  </Link>;
+}