project initiate.

src/page-components/device/BleControl.module.css

@@ -0,0 +1,11 @@
+@layer pages {
+  .ble_control {
+    height: calc(var(--spacing) * 12);
+    padding-inline: calc(var(--spacing) * 2);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+}

src/page-components/device/BleControl.tsx

@@ -0,0 +1,17 @@
+import { useAtomValue } from 'jotai';
+import { FC } from 'react';
+import { BleState } from '../../context/EstimContext';
+import styles from './BleControl.module.css';
+
+const BleControl: FC = () => {
+  const bleState = useAtomValue(BleState);
+
+  return (
+    <div className={styles.ble_control}>
+      <button disabled={!bleState.ready || bleState.searching}>Scan</button>
+      <button disabled={!bleState.ready || !bleState.connected}>Disconnect</button>
+    </div>
+  );
+};
+
+export default BleControl;

src/page-components/device/DeviceDetail.module.css

@@ -0,0 +1,8 @@
+@layer pages {
+  .device_detail {
+    flex: 2;
+    border-radius: calc(var(--border-radius) * 2);
+    padding: calc(var(--spacing) * 2);
+    background-color: var(--color-dark-surface-container);
+  }
+}

src/page-components/device/DeviceDetail.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import styles from './DeviceDetail.module.css';
+
+const DeviceDetail: FC = () => {
+  return <div className={styles.device_detail}></div>;
+};
+
+export default DeviceDetail;

src/page-components/device/DeviceList.module.css

@@ -0,0 +1,8 @@
+@layer pages {
+  .devices {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

src/page-components/device/DeviceList.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ScrollArea } from '../../components/ScrollArea';
+import styles from './DeviceList.module.css';
+
+const DeviceList: FC = () => {
+  return (
+    <div className={styles.devices}>
+      <ScrollArea enableY></ScrollArea>
+    </div>
+  );
+};
+
+export default DeviceList;