49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
 
|
"use client";
|
||
|
|
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { ActuatorSlider } from "./ActuatorSlider";
|
||
|
|
import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
|
||
|
|
|
||
|
|
interface DeviceCardProps {
|
||
|
|
device: ConnectedDeviceInfo;
|
||
|
|
actuatorValues: Record<number, number>;
|
||
|
|
transmittingFeatureIndex: number | null;
|
||
|
|
onActuatorChange: (featureIndex: number, value: number) => void;
|
||
|
|
onStop: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function DeviceCard({
|
||
|
|
device,
|
||
|
|
actuatorValues,
|
||
|
|
transmittingFeatureIndex,
|
||
|
|
onActuatorChange,
|
||
|
|
onStop,
|
||
|
|
}: DeviceCardProps) {
|
||
|
|
return (
|
||
|
|
<Card className="bp-glass">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
||
|
|
<CardTitle>{device.displayName ?? device.name}</CardTitle>
|
||
|
|
<Button variant="outline" size="sm" onClick={onStop}>
|
||
|
|
Stop
|
||
|
|
</Button>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="flex flex-col gap-4">
|
||
|
|
{device.actuators.length === 0 ? (
|
||
|
|
<p className="text-sm text-muted-foreground">No controllable actuators reported.</p>
|
||
|
|
) : (
|
||
|
|
device.actuators.map((actuator) => (
|
||
|
|
<ActuatorSlider
|
||
|
|
key={actuator.featureIndex}
|
||
|
|
actuator={actuator}
|
||
|
|
value={actuatorValues[actuator.featureIndex] ?? 0}
|
||
|
|
transmitting={transmittingFeatureIndex === actuator.featureIndex}
|
||
|
|
onChange={(value) => onActuatorChange(actuator.featureIndex, value)}
|
||
|
|
/>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|