's'

app/components/Sidebar.tsx

@@ -0,0 +1,245 @@
+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>
+  );
+}