67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import type React from "react";
|
|
|
|
import { useAppStore } from "@app/core/stores/appStore.js";
|
|
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
|
|
import { NavSpacer } from "@app/Nav/NavSpacer.js";
|
|
import { PageNav } from "@app/Nav/PageNav.js";
|
|
import { Mono } from "@components/generic/Mono.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, darkMode } = useAppStore();
|
|
|
|
return (
|
|
<div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
|
|
<div className="flex items-center gap-3">
|
|
<Mono className="select-none">Connected Devices</Mono>
|
|
<span className="flex font-bold text-textPrimary">
|
|
{getDevices().map((device) => (
|
|
<div
|
|
key={device.id}
|
|
onClick={() => {
|
|
setSelectedDevice(device.id);
|
|
}}
|
|
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${
|
|
selectedDevice === device.id ? "border-l-accent" : ""
|
|
}`}
|
|
>
|
|
<Hashicon
|
|
size={32}
|
|
value={device.hardware.myNodeNum.toString()}
|
|
/>
|
|
</div>
|
|
))}
|
|
<div
|
|
onClick={() => {
|
|
setSelectedDevice(0);
|
|
}}
|
|
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${
|
|
selectedDevice === 0 ? "border-l-accent" : ""
|
|
}`}
|
|
>
|
|
<PlusIcon className="w-6" />
|
|
</div>
|
|
</span>
|
|
</div>
|
|
|
|
{selectedDevice !== 0 && (
|
|
<>
|
|
<NavSpacer />
|
|
<PageNav />
|
|
</>
|
|
)}
|
|
|
|
<NavSpacer />
|
|
|
|
<div>//actions</div>
|
|
|
|
<img
|
|
src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}
|
|
className="mt-auto px-2 py-3"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|