Publish LumaOps source

2026-09-03 01:18:36 +02:00
commit 7f1c0e5f71
2363 changed files with 501543 additions and 0 deletions
@@ -0,0 +1,25 @@
+import { MemoryStick } from "lucide-react";
+import type { CSSProperties } from "react";
+import { Link } from "react-router-dom";
+import type { DeviceGroup } from "../api/types";
+import { colorToHex } from "../lib/utils";
+import { Badge } from "./ui";
+
+interface DeviceGroupCardProps {
+  group: DeviceGroup;
+  list?: boolean;
+}
+
+export function DeviceGroupCard({ group, list = false }: DeviceGroupCardProps) {
+  const color = colorToHex(group.state.colors?.[0]);
+  return <Link to={`/device-groups/${group.id}`} className={`${list ? "device-row" : "device-card"} device-card--group`}>
+    <div className="device-card__visual" style={{ "--device-color": color } as CSSProperties}>
+      <span className="device-glow" /><MemoryStick size={list ? 22 : 30} /><span className={`presence ${group.online_count ? "presence--online" : ""}`} />
+    </div>
+    <div className="device-card__content">
+      <div className="device-card__title"><div><h2>{group.name}</h2><p>{group.vendor} · gegroepeerd RAM-apparaat</p></div><Badge tone="accent">Groep</Badge></div>
+      <div className="device-card__meta"><Badge tone={group.online ? "success" : "warning"}>{group.online_count}/{group.module_count} online</Badge>{group.mixed ? <Badge tone="warning">Gemengde toestand</Badge> : null}</div>
+      <div className={list ? "device-row__extra" : "device-card__footer"}><span>{group.state.mode ?? "Gemengd"}</span><span>{group.module_count} modules · {group.led_count} leds</span></div>
+    </div>
+  </Link>;
+}