's'
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user