35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
|
import { useDevice } from "@/contexts/DeviceContext";
|
|||
|
|
import { Loader2, Wifi } from "lucide-react";
|
|||
|
|
import BottomNav from "@/components/BottomNav";
|
|||
|
|
|
|||
|
|
/** 自动连接设备时的占位（替代原 ConnectScreen） */
|
|||
|
|
export default function ConnectionPlaceholder() {
|
|||
|
|
const { ip, isConnecting, error } = useDevice();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-black flex flex-col items-center justify-center px-6 pb-24">
|
|||
|
|
<div className="mb-6 flex size-[4.5rem] items-center justify-center rounded-[16px] border border-white/15">
|
|||
|
|
<Wifi size={28} className="text-[#00FFF6]/80" />
|
|||
|
|
</div>
|
|||
|
|
{isConnecting ? (
|
|||
|
|
<>
|
|||
|
|
<Loader2 size={28} className="animate-spin text-[#00FFF6] mb-3" />
|
|||
|
|
<p className="text-[15px] text-white/70">Connecting to {ip}…</p>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<p className="text-[15px] text-white/80 mb-2">Connection failed</p>
|
|||
|
|
<p className="text-[13px] text-white/45 text-center max-w-xs">
|
|||
|
|
{error ?? "Check the device IP and your network connection."}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-[12px] text-white/30 mt-3">
|
|||
|
|
Specify the device in the URL, e.g.{" "}
|
|||
|
|
<span className="text-white/50">?ip=10.0.0.119</span>
|
|||
|
|
</p>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<BottomNav />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|