Jens/LumaOps-Public
1
0 Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Publish curated LumaOps source from c85ee9ef8f1454f5c305398902afbb9e6738de40
Managed validation / full (push) Failing after 8s

Browse Source
This commit is contained in:
Public Source Publisher committed 2026-09-30 00:26:45 +00:00
1 parent 91f8b3e3c1
commit def7920856
2271 files changed
+501225 -501178
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lumaops/frontend/src/components/DeviceCard.tsx
+27 -27
View File
@@ -1,27 +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>;
}
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>;
}