37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { useAtomValue } from 'jotai';
|
|
import { FC } from 'react';
|
|
import { ScrollArea } from '../../components/ScrollArea';
|
|
import { AvailablePeripherals } from '../../context/EstimContext';
|
|
import IconRssi from '../../icons/IconRssi';
|
|
import styles from './DeviceList.module.css';
|
|
|
|
const AvailableDevices: FC = () => {
|
|
const devices = useAtomValue(AvailablePeripherals);
|
|
|
|
return (
|
|
<div className={styles.devices_list}>
|
|
{devices.length === 0 && <div className={styles.empty_prompt}>No available devices.</div>}
|
|
{devices.map((device, index) => (
|
|
<div key={index} className={styles.device_card}>
|
|
<div className={styles.device_name}>{device.represent}</div>
|
|
<IconRssi height={14} level={device.rssi} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DeviceList: FC = () => {
|
|
return (
|
|
<div className={styles.devices}>
|
|
<ScrollArea enableY>
|
|
<div className={styles.devices_list_layout}>
|
|
<AvailableDevices />
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DeviceList;
|