yangy
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
export default function StatusBar() {
|
|
const [time, setTime] = useState("14:35");
|
|
|
|
useEffect(() => {
|
|
const updateTime = () => {
|
|
const now = new Date();
|
|
const hours = String(now.getHours()).padStart(2, "0");
|
|
const minutes = String(now.getMinutes()).padStart(2, "0");
|
|
setTime(`${hours}:${minutes}`);
|
|
};
|
|
updateTime();
|
|
const interval = setInterval(updateTime, 60000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center justify-between px-4 py-1 text-[13px] text-white font-medium"
|
|
style={{
|
|
background: "#000",
|
|
height: "44px",
|
|
borderBottom: "1px solid rgba(255,255,255,0.08)",
|
|
}}
|
|
>
|
|
<span>{time}</span>
|
|
<div className="flex items-center gap-0.5">
|
|
{/* 信号强度 */}
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
className="w-4 h-4"
|
|
>
|
|
<path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
|
|
</svg>
|
|
{/* WiFi */}
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
|
|
</svg>
|
|
{/* 蓝牙 */}
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
|
|
</svg>
|
|
{/* 电量 */}
|
|
<div className="w-6 h-3.5 border border-current rounded-[3px] flex items-center justify-end pr-1">
|
|
<div className="w-1.5 h-2 bg-current rounded-[1px]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|