246 lines
11 KiB
TypeScript
246 lines
11 KiB
TypeScript
const meetups = [
|
||
{ city: "清迈", emoji: "🇹🇭", date: "3月9日 周一", attendees: 12 },
|
||
{ city: "曼谷", emoji: "🇹🇭", date: "3月12日 周四", attendees: 8 },
|
||
{ city: "巴厘岛", emoji: "🇮🇩", date: "3月14日 周六", attendees: 15 },
|
||
{ city: "大理", emoji: "🇨🇳", date: "3月16日 周一", attendees: 6 },
|
||
{ city: "里斯本", emoji: "🇵🇹", date: "3月20日 周五", attendees: 23 },
|
||
];
|
||
|
||
const travelingNow = [
|
||
{ name: "小明", bg: "#f43f5e", destination: "清迈" },
|
||
{ name: "雨晴", bg: "#8b5cf6", destination: "巴厘岛" },
|
||
{ name: "阿杰", bg: "#3b82f6", destination: "曼谷" },
|
||
{ name: "小燕", bg: "#10b981", destination: "东京" },
|
||
{ name: "大伟", bg: "#f59e0b", destination: "里斯本" },
|
||
{ name: "佳琪", bg: "#ec4899", destination: "墨西哥城" },
|
||
{ name: "志远", bg: "#06b6d4", destination: "柏林" },
|
||
{ name: "心怡", bg: "#ef4444", destination: "首尔" },
|
||
{ name: "凯文", bg: "#84cc16", destination: "巴塞罗那" },
|
||
{ name: "子豪", bg: "#7c3aed", destination: "成都" },
|
||
{ name: "浩然", bg: "#0d9488", destination: "大理" },
|
||
{ name: "雅琪", bg: "#ea580c", destination: "台北" },
|
||
{ name: "天翔", bg: "#6366f1", destination: "布达佩斯" },
|
||
{ name: "美玲", bg: "#d946ef", destination: "梅德林" },
|
||
{ name: "俊杰", bg: "#14b8a6", destination: "普吉岛" },
|
||
{ name: "晓华", bg: "#f97316", destination: "吉隆坡" },
|
||
];
|
||
|
||
const newMembers = [
|
||
{ name: "林", bg: "#3b82f6" },
|
||
{ name: "张", bg: "#8b5cf6" },
|
||
{ name: "陈", bg: "#f43f5e" },
|
||
{ name: "周", bg: "#10b981" },
|
||
{ name: "吴", bg: "#f59e0b" },
|
||
{ name: "杨", bg: "#ec4899" },
|
||
{ name: "赵", bg: "#06b6d4" },
|
||
{ name: "黄", bg: "#ef4444" },
|
||
{ name: "孙", bg: "#84cc16" },
|
||
{ name: "马", bg: "#7c3aed" },
|
||
{ name: "朱", bg: "#0d9488" },
|
||
{ name: "胡", bg: "#ea580c" },
|
||
{ name: "郭", bg: "#6366f1" },
|
||
{ name: "何", bg: "#d946ef" },
|
||
{ name: "高", bg: "#14b8a6" },
|
||
{ name: "梁", bg: "#f97316" },
|
||
{ name: "郑", bg: "#a855f7" },
|
||
{ name: "罗", bg: "#22c55e" },
|
||
{ name: "谢", bg: "#e11d48" },
|
||
{ name: "韩", bg: "#0ea5e9" },
|
||
];
|
||
|
||
const hotTopics = [
|
||
{ title: "清迈最佳共享办公空间推荐 Top 10", views: 2340 },
|
||
{ title: "2026年数字游民签证政策汇总", views: 1890 },
|
||
{ title: "远程工作者的跨国税务规划指南", views: 1560 },
|
||
{ title: "东南亚 vs 拉美：哪个更适合游民？", views: 1230 },
|
||
{ title: "新手游民必备工具与装备清单", views: 980 },
|
||
];
|
||
|
||
export default function Sidebar() {
|
||
return (
|
||
<aside className="w-[320px] shrink-0 hidden lg:block">
|
||
<div className="sticky top-20 space-y-4 sidebar-scroll max-h-[calc(100vh-100px)] overflow-y-auto pr-1">
|
||
{/* Insurance / Visa Promo */}
|
||
<div className="rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 p-5">
|
||
<div className="flex items-start gap-3 mb-3">
|
||
<span className="text-2xl">🛡️</span>
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 text-sm">全球旅行保险</h3>
|
||
<p className="text-xs text-gray-500 mt-0.5">
|
||
为数字游民定制的全球医疗保障方案
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-emerald-700 bg-emerald-100/50 rounded-lg px-3 py-2 mb-3">
|
||
覆盖 195+ 国家和地区，远程工作专属条款，¥15/天起
|
||
</p>
|
||
<button className="w-full text-center text-sm font-semibold text-emerald-700 hover:text-emerald-800 bg-white border border-emerald-200 rounded-full py-2 transition-colors hover:bg-emerald-50">
|
||
了解更多 →
|
||
</button>
|
||
<p className="text-[10px] text-gray-400 text-center mt-2">广告</p>
|
||
</div>
|
||
|
||
{/* Upcoming Meetups */}
|
||
<div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5">
|
||
🍹 近期聚会
|
||
</h3>
|
||
<span className="text-[11px] text-gray-400">8场/月</span>
|
||
</div>
|
||
<div className="space-y-3">
|
||
{meetups.map((m) => (
|
||
<div
|
||
key={m.city + m.date}
|
||
className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0 last:pb-0"
|
||
>
|
||
<div className="flex items-center gap-2.5">
|
||
<span className="text-lg">{m.emoji}</span>
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-800">
|
||
{m.city}
|
||
</p>
|
||
<p className="text-[11px] text-gray-400">{m.date}</p>
|
||
</div>
|
||
</div>
|
||
<span className="text-[11px] text-gray-400 bg-gray-50 rounded-full px-2 py-0.5">
|
||
{m.attendees} 人报名
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button className="w-full text-center text-xs font-medium text-gray-500 hover:text-gray-700 mt-3 pt-3 border-t border-gray-100 transition-colors">
|
||
查看全部聚会 →
|
||
</button>
|
||
</div>
|
||
|
||
{/* Traveling Now */}
|
||
<div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5">
|
||
🛩️ 正在旅行
|
||
</h3>
|
||
<span className="text-[11px] text-gray-400">
|
||
{travelingNow.length} 人
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{travelingNow.map((m) => (
|
||
<div key={m.name} className="group relative">
|
||
<div
|
||
className="w-9 h-9 rounded-full flex items-center justify-center text-xs text-white font-medium shadow-sm cursor-pointer hover:scale-110 transition-transform avatar-online"
|
||
style={{ backgroundColor: m.bg }}
|
||
title={`${m.name} · ${m.destination}`}
|
||
>
|
||
{m.name.charAt(0)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* New Members */}
|
||
<div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5">
|
||
👋 新加入成员
|
||
</h3>
|
||
<span className="text-[11px] text-gray-400">86人/月</span>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{newMembers.map((m) => (
|
||
<div
|
||
key={m.name}
|
||
className="w-9 h-9 rounded-full flex items-center justify-center text-xs text-white font-medium shadow-sm cursor-pointer hover:scale-110 transition-transform"
|
||
style={{ backgroundColor: m.bg }}
|
||
>
|
||
{m.name}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Hot Topics */}
|
||
<div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
|
||
<h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5 mb-4">
|
||
🔥 热门讨论
|
||
</h3>
|
||
<div className="space-y-3">
|
||
{hotTopics.map((t, i) => (
|
||
<a
|
||
key={t.title}
|
||
href="#"
|
||
className="flex items-start gap-2.5 group"
|
||
>
|
||
<span className="text-xs font-bold text-gray-300 mt-0.5 w-4 shrink-0">
|
||
{i + 1}
|
||
</span>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm text-gray-700 group-hover:text-gray-900 transition-colors line-clamp-1 leading-snug">
|
||
{t.title}
|
||
</p>
|
||
<p className="text-[11px] text-gray-400 mt-0.5">
|
||
{t.views.toLocaleString()} 次浏览
|
||
</p>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
<button className="w-full text-center text-xs font-medium text-gray-500 hover:text-gray-700 mt-3 pt-3 border-t border-gray-100 transition-colors">
|
||
查看更多话题 →
|
||
</button>
|
||
</div>
|
||
|
||
{/* Chat CTA */}
|
||
<div className="rounded-2xl bg-gradient-to-br from-violet-50 to-purple-50 border border-violet-100 p-5">
|
||
<div className="flex items-start gap-3 mb-3">
|
||
<span className="text-2xl">💬</span>
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 text-sm">
|
||
游牧中国社区聊天
|
||
</h3>
|
||
<p className="text-xs text-gray-500 mt-0.5">
|
||
本月已有 3,200+ 条消息
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button className="w-full text-center text-sm font-semibold text-violet-700 hover:text-violet-800 bg-white border border-violet-200 rounded-full py-2 transition-colors hover:bg-violet-50">
|
||
加入聊天 →
|
||
</button>
|
||
</div>
|
||
|
||
{/* Visa Service */}
|
||
<div className="rounded-2xl bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-100 p-5">
|
||
<div className="flex items-start gap-3 mb-3">
|
||
<span className="text-2xl">🏛️</span>
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 text-sm">签证代办服务</h3>
|
||
<p className="text-xs text-gray-500 mt-0.5">
|
||
数字游民签证、工作签证、税务规划一站式服务
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||
<span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
|
||
🇹🇭 泰国
|
||
</span>
|
||
<span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
|
||
🇵🇹 葡萄牙
|
||
</span>
|
||
<span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
|
||
🇪🇸 西班牙
|
||
</span>
|
||
<span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
|
||
🇮🇩 印尼
|
||
</span>
|
||
</div>
|
||
<button className="w-full text-center text-sm font-semibold text-amber-700 hover:text-amber-800 bg-white border border-amber-200 rounded-full py-2 transition-colors hover:bg-amber-50">
|
||
了解详情 →
|
||
</button>
|
||
<p className="text-[10px] text-gray-400 text-center mt-2">广告</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|