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.
57 lines
2.3 KiB
57 lines
2.3 KiB
import icon_bluetooth from '../assets/icon_bluetooth.svg';
|
|
import icon_arr_d from '../assets/icon_arr_down.svg';
|
|
import './CustomNavBar.scss';
|
|
import { useState } from 'react';
|
|
import { useAppSelector } from '../utils/hooks';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
export default function CustomNavBar({ title }: { title: string }) {
|
|
const navigate = useNavigate();
|
|
const device = useAppSelector((state) => state.context.device);
|
|
const [showDetail, setShowDetail] = useState(false);
|
|
|
|
return (
|
|
<div className="relative bg-white h-[--navBarHeight] border-b border-[#D8D8D8]">
|
|
{/** 温度，水平仪 */}
|
|
<div
|
|
className="absolute h-[30px] w-full bg-white border border-[#D8D8D8] flex items-center gap-2 px-2"
|
|
style={{ top: device.connected && showDetail ? '100%' : 0, transition: 'top 300ms' }}
|
|
>
|
|
<span className="flex-1">温度: {device.temperature.toFixed(1)}°C</span>
|
|
<span className="flex-1">X轴倾斜: {device.inclinatorX.toFixed(2)}</span>
|
|
<span className="flex-1">Y轴倾斜: {device.inclinatorY.toFixed(2)}</span>
|
|
</div>
|
|
{/** 导航栏 */}
|
|
<div className="absolute left-0 top-0 w-full h-full flex items-center px-3 bg-white">
|
|
<h1 className="text-lg text-text ml-3">{title}</h1>
|
|
{/** 蓝牙连接状态 */}
|
|
{device.connected ? (
|
|
<div
|
|
className="ml-auto flex items-center cursor-pointer"
|
|
onClick={() => setShowDetail(!showDetail)}
|
|
>
|
|
<div className="bluetooth-battery flex justify-center items-center">{device.power}%</div>
|
|
<img src={icon_bluetooth} alt="icon" className="mx-2" />
|
|
<span>设备已连接</span>
|
|
<img
|
|
src={icon_arr_d}
|
|
alt="arr"
|
|
style={{
|
|
transform: device.connected && showDetail ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
transition: 'transform 300ms',
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="ml-auto flex items-center cursor-pointer"
|
|
onClick={() => navigate('/home/bluetooth')}
|
|
>
|
|
<img src={icon_bluetooth} alt="icon" className="mx-2" />
|
|
<span>设备未连接</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|