's'

app/topic/components/TopicComingSoon.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+import { getTopicConfig } from "../config";
+
+type TopicComingSoonProps = {
+  topicId: string;
+};
+
+export function TopicComingSoon({ topicId }: TopicComingSoonProps) {
+  const config = getTopicConfig(topicId);
+  if (!config?.externalUrl) return null;
+
+  return (
+    <section className="border-t border-[var(--border)] py-16 md:py-24">
+      <div className="mx-auto max-w-2xl px-4 text-center sm:px-6">
+        <div className="mb-6 text-6xl">{config.icon}</div>
+        <h2 className="mb-4 text-xl font-bold sm:text-2xl">即将上线</h2>
+        <p className="mb-8 text-[var(--muted-foreground)]">{config.desc}</p>
+        <Link
+          href={config.externalUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90"
+        >
+          前往数字游民指南了解更多 →
+        </Link>
+      </div>
+    </section>
+  );
+}