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.
34 lines
1.5 KiB
34 lines
1.5 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';
|
|
|
|
export default function CustomNavBar({ title }: { title: string }) {
|
|
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-4"
|
|
style={{ top: showDetail ? '100%' : 0, transition: 'top 300ms' }}>
|
|
<span className="flex-1">温度: 31.2°C</span>
|
|
<span className="flex-1">X轴倾斜: -0.496</span>
|
|
<span className="flex-1">Y轴倾斜: 3.005</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>
|
|
<div className="ml-auto flex items-center" onClick={() => setShowDetail(!showDetail)}>
|
|
<div className="bluetooth-battery flex justify-center items-center">78%</div>
|
|
<img src={icon_bluetooth} alt="icon" className="mx-2" />
|
|
<span>设备已连接</span>
|
|
<img src={icon_arr_d} alt="arr" style={{
|
|
transform: showDetail ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
transition: 'transform 300ms'
|
|
}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|