44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { TOPICS } from "@/app/data/vip.mock";
|
|
import styles from "../vip.module.css";
|
|
|
|
export function TopicEntries() {
|
|
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 { id, href } = t;
|
|
const content = (
|
|
<>
|
|
<span className={styles.topicIcon}>{t.icon}</span>
|
|
<span className={styles.topicTitle}>{t.title}</span>
|
|
<span className={styles.topicDesc}>{t.desc}</span>
|
|
</>
|
|
);
|
|
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>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|