57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { WEEKLY_ACTIONS } from "@/app/data/vip.mock";
|
|
import styles from "../vip.module.css";
|
|
|
|
export function WeeklyActions() {
|
|
return (
|
|
<section className={styles.section} style={{ paddingBottom: "2rem" }}>
|
|
<h2 className={styles.sectionTitle}>本周推荐</h2>
|
|
<div
|
|
className="animate__animated animate__fadeInUp"
|
|
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
|
|
>
|
|
{WEEKLY_ACTIONS.map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
target={item.href.startsWith("http") ? "_blank" : undefined}
|
|
rel={item.href.startsWith("http") ? "noopener noreferrer" : undefined}
|
|
className={styles.card}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.75rem",
|
|
marginBottom: "0.5rem",
|
|
textDecoration: "none",
|
|
color: "inherit",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: "24px",
|
|
height: "24px",
|
|
borderRadius: "50%",
|
|
background: "var(--accent)",
|
|
color: "var(--accent-foreground)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: "0.75rem",
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{item.priority}
|
|
</span>
|
|
<span style={{ color: "var(--foreground)" }}>{item.text}</span>
|
|
<span style={{ marginLeft: "auto", color: "var(--accent)", fontSize: "0.9rem" }}>
|
|
→
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|