49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
const TIPS = [
|
|
{ emoji: "📶", text: "入住前用 Speedtest 测网速，低于 20Mbps 慎重签约" },
|
|
{ emoji: "💳", text: "准备一张无外汇手续费的信用卡，省下不少换汇成本" },
|
|
{ emoji: "🏥", text: "出发前购买 SafetyWing 等国际医疗保险，月费约 $40+" },
|
|
{ emoji: "🕐", text: "选时区重叠 ≥4 小时的城市，远程协作更轻松" },
|
|
{ emoji: "🛂", text: "护照有效期建议预留 6 个月以上，避免登机被拒" },
|
|
{ emoji: "☕", text: "先订 1 周 Airbnb 探路，再决定长期租房" },
|
|
];
|
|
|
|
export default function NomadTips() {
|
|
const [idx, setIdx] = useState(0);
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const show = setTimeout(() => setVisible(true), 8000);
|
|
return () => clearTimeout(show);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!visible) return;
|
|
const t = setInterval(() => setIdx((i) => (i + 1) % TIPS.length), 6000);
|
|
return () => clearInterval(t);
|
|
}, [visible]);
|
|
|
|
if (!visible) return null;
|
|
|
|
const tip = TIPS[idx];
|
|
|
|
return (
|
|
<div className="nomad-tips" role="status">
|
|
<button className="nomad-tips-close" onClick={() => setVisible(false)} aria-label="关闭">✕</button>
|
|
<span className="nomad-tips-emoji">{tip.emoji}</span>
|
|
<div className="nomad-tips-body">
|
|
<strong>游民小贴士</strong>
|
|
<p key={idx}>{tip.text}</p>
|
|
</div>
|
|
<div className="nomad-tips-dots">
|
|
{TIPS.map((_, i) => (
|
|
<span key={i} className={i === idx ? "active" : ""} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|