's'

app/vip/components/dashboard/TopicCards.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { TOPICS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function TopicCards() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>模块入口</h2>
+      <div
+        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {TOPICS.map((t) => {
+          const content = (
+            <>
+              <span className={styles.topicIcon}>{t.icon}</span>
+              <span className={styles.topicTitle}>{t.title}</span>
+              <span className={styles.topicDesc}>{t.desc}</span>
+            </>
+          );
+          if (t.href) {
+            return (
+              <Link
+                key={t.id}
+                href={t.href}
+                className={styles.topicCard}
+                target={t.href.startsWith("http") ? "_blank" : undefined}
+                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
+              >
+                {content}
+              </Link>
+            );
+          }
+          return (
+            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
+              {content}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}