You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.7 KiB
48 lines
1.7 KiB
import type React from "react";
|
|
|
|
import { useAppStore } from "@app/core/stores/appStore.js";
|
|
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
|
|
import { Hashicon } from "@emeraldpay/hashicon-react";
|
|
import { PlusIcon } from "@heroicons/react/24/outline";
|
|
|
|
export const DeviceSelector = (): JSX.Element => {
|
|
const { getDevices } = useDeviceStore();
|
|
const { selectedDevice, setSelectedDevice } = useAppStore();
|
|
|
|
return (
|
|
<div className="flex h-full w-16 items-center whitespace-nowrap bg-slate-50 py-12 text-sm [writing-mode:vertical-rl]">
|
|
<span className="font-mono text-slate-500">Connected Devices</span>
|
|
<span className="mt-6 flex gap-4 font-bold text-slate-900">
|
|
{getDevices().map((device) => (
|
|
<div
|
|
key={device.id}
|
|
onClick={() => {
|
|
setSelectedDevice(device.id);
|
|
}}
|
|
className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
|
|
>
|
|
<Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
|
|
<div
|
|
className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-orange-300 ${
|
|
device.id === selectedDevice
|
|
? "bg-orange-400"
|
|
: "bg-transparent"
|
|
}`}
|
|
/>
|
|
</div>
|
|
))}
|
|
<div
|
|
onClick={() => {
|
|
setSelectedDevice(0);
|
|
}}
|
|
className={`h-8 w-8 cursor-pointer rounded-md border-2 border-dashed p-2 hover:border-orange-300 ${
|
|
selectedDevice === 0 ? "border-orange-400" : "border-slate-200"
|
|
}`}
|
|
>
|
|
<PlusIcon />
|
|
</div>
|
|
</span>
|
|
<img src="Logo_Black.svg" className="mt-auto px-3" />
|
|
</div>
|
|
);
|
|
};
|
|
|