's'

app/vip/components/dashboard/TopicCards.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { TOPICS } from "@/app/data/vip.mock";
 import styles from "../vip.module.css";
 
+type TopicItem = (typeof TOPICS)[number];
+
 export function TopicCards() {
   return (
     <section className={styles.section}>
@@ -12,7 +14,8 @@ export function TopicCards() {
         className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
         style={{ animationDelay: "0.2s", animationFillMode: "both" }}
       >
-        {TOPICS.map((t) => {
+        {TOPICS.map((t: TopicItem) => {
+          const { id, href } = t;
           const content = (
             <>
               <span className={styles.topicIcon}>{t.icon}</span>
@@ -20,21 +23,18 @@ export function TopicCards() {
               <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 }}>
+          return href ? (
+            <Link
+              key={id}
+              href={href}
+              className={styles.topicCard}
+              target={href.startsWith("http") ? "_blank" : undefined}
+              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
+            >
+              {content}
+            </Link>
+          ) : (
+            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
               {content}
             </div>
           );