This commit is contained in:
eric
2026-03-12 00:41:50 -05:00
parent 5caf970c7e
commit 7e8f0e3e40
3 changed files with 59 additions and 58 deletions

View File

@@ -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>
);

View File

@@ -18,6 +18,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
style={{ animationDelay: "0.2s", animationFillMode: "both", marginBottom: "1.5rem" }}
>
{TOPICS_DISPLAY.map((t) => {
const { id, href } = t;
const isLocked = "locked" in t && t.locked && onLockedClick;
const content = (
<span className={styles.topicCardInner}>
@@ -32,7 +33,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
if (isLocked) {
return (
<button
key={t.id}
key={id}
type="button"
className={styles.topicCard}
onClick={onLockedClick}
@@ -42,21 +43,21 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
</button>
);
}
if (t.href) {
if (href) {
return (
<Link
key={t.id}
href={t.href}
key={id}
href={href}
className={styles.topicCard}
target={t.href.startsWith("http") ? "_blank" : undefined}
rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
target={href.startsWith("http") ? "_blank" : undefined}
rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
>
{content}
</Link>
);
}
return (
<div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
<div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
{content}
</div>
);
@@ -69,27 +70,28 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
style={{ animationDelay: "0.22s", animationFillMode: "both", marginBottom: "1.5rem" }}
>
{VIDEO_COURSES_DISPLAY.map((v) =>
v.href ? (
{VIDEO_COURSES_DISPLAY.map((v) => {
const { id, href, icon, title, desc } = v;
return href ? (
<Link
key={v.id}
href={v.href}
key={id}
href={href}
className={styles.topicCard}
target={v.href.startsWith("http") ? "_blank" : undefined}
rel={v.href.startsWith("http") ? "noopener noreferrer" : undefined}
target={href.startsWith("http") ? "_blank" : undefined}
rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
>
<span className={styles.topicIcon}>{v.icon}</span>
<span className={styles.topicTitle}>{v.title}</span>
<span className={styles.topicDesc}>{v.desc}</span>
<span className={styles.topicIcon}>{icon}</span>
<span className={styles.topicTitle}>{title}</span>
<span className={styles.topicDesc}>{desc}</span>
</Link>
) : (
<div key={v.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.9 }}>
<span className={styles.topicIcon}>{v.icon}</span>
<span className={styles.topicTitle}>{v.title}</span>
<span className={styles.topicDesc}>{v.desc}</span>
<div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.9 }}>
<span className={styles.topicIcon}>{icon}</span>
<span className={styles.topicTitle}>{title}</span>
<span className={styles.topicDesc}>{desc}</span>
</div>
)
)}
);
})}
</div>
{/* 电子书展示 */}
@@ -105,6 +107,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
}}
>
{EBOOKS_DISPLAY.map((e) => {
const { id, href } = e;
const cardContent = (
<>
<span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📖</span>
@@ -117,10 +120,10 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
</div>
</>
);
return e.href ? (
return href ? (
<Link
key={e.id}
href={e.href}
key={id}
href={href}
className={styles.card}
style={{
display: "block",
@@ -133,7 +136,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
</Link>
) : (
<div
key={e.id}
key={id}
className={styles.card}
style={{
display: "block",

View File

@@ -12,7 +12,8 @@ export function TopicEntries() {
className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
>
{TOPICS.map((t, i) => {
{TOPICS.map((t) => {
const { id, href } = t;
const content = (
<>
<span className={styles.topicIcon}>{t.icon}</span>
@@ -20,21 +21,18 @@ export function TopicEntries() {
<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>
);