44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { ASSET_STATS } from "@/app/data/vip.mock";
|
|
import styles from "../vip.module.css";
|
|
|
|
const STAT_ITEMS = [
|
|
{ key: "topics", label: "模块" },
|
|
{ key: "ebooks", label: "电子书" },
|
|
{ key: "videos", label: "视频" },
|
|
{ key: "updateFrequency", label: "更新" },
|
|
] as const;
|
|
|
|
export function AssetStats() {
|
|
return (
|
|
<section className={`${styles.section} ${styles.statsSection}`}>
|
|
<div
|
|
className={`${styles.statsGrid} animate__animated animate__fadeInUp`}
|
|
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
|
|
>
|
|
{STAT_ITEMS.map(({ key, label }, i) => {
|
|
const value =
|
|
key === "updateFrequency"
|
|
? ASSET_STATS[key]
|
|
: String(ASSET_STATS[key as keyof typeof ASSET_STATS]);
|
|
return (
|
|
<div
|
|
key={key}
|
|
className={styles.card}
|
|
style={{
|
|
textAlign: "center",
|
|
animationDelay: `${0.25 + i * 0.05}s`,
|
|
animationFillMode: "both",
|
|
}}
|
|
>
|
|
<div className={styles.bigNumber}>{value}</div>
|
|
<div className={styles.bigNumberLabel}>{label}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|