Styled Box - Copy this React, Mui Component to your project
I have a project in react native expo to display battery status like voltage, current, SOC, Cells voltages etc for this i have a home page to display header component, BLE connection component, status page/ voltages page and navigation components at bottom to change pages i have created the UI using components for above all except BLE . Please generate code for BLE components to display as screen wide button bar below header if it is not connected it will show "Disconnected" as Text and on click list below itself with scan for available Ble devices which contains "OKE" in it and when user select one it should connect the that device, and collapse back to bar and display connected <device name> as text on it. if it is connected with a device it will display button text as <device name> and on click it list of other Available device that can be connected. create generate a hook code that get permission, process all Ble connections disconnection and other functionality. it should send periodic data at interval and also receive data based on active state/pages (i.e. Status or voltages) Please generate React native Js code in three part for above as 1)Hook for backend processes and data transfer to parent and BLE component, 2)Components to show as bar and 3)parent to display status or voltage and pass parameter to send data
