26 lines
1.5 KiB
TypeScript
26 lines
1.5 KiB
TypeScript
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>;
|
|
}
|