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

View File

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

View File

@@ -12,7 +12,8 @@ export function TopicEntries() {
className={`${styles.topicGrid} animate__animated animate__fadeInUp`} className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
style={{ animationDelay: "0.2s", animationFillMode: "both" }} style={{ animationDelay: "0.2s", animationFillMode: "both" }}
> >
{TOPICS.map((t, i) => { {TOPICS.map((t) => {
const { id, href } = t;
const content = ( const content = (
<> <>
<span className={styles.topicIcon}>{t.icon}</span> <span className={styles.topicIcon}>{t.icon}</span>
@@ -20,21 +21,18 @@ export function TopicEntries() {
<span className={styles.topicDesc}>{t.desc}</span> <span className={styles.topicDesc}>{t.desc}</span>
</> </>
); );
if (t.href) { return href ? (
return ( <Link
<Link key={id}
key={t.id} href={href}
href={t.href} className={styles.topicCard}
className={styles.topicCard} target={href.startsWith("http") ? "_blank" : undefined}
target={t.href.startsWith("http") ? "_blank" : undefined} rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined} >
> {content}
{content} </Link>
</Link> ) : (
); <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
}
return (
<div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
{content} {content}
</div> </div>
); );