71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
|
|
import styles from "./voice-package-card.module.css";
|
|
|
|
export interface VoicePackageCardProps {
|
|
/** 已使用分钟数 */
|
|
usedMinutes: number;
|
|
/** 总分钟数 */
|
|
totalMinutes: number;
|
|
/** "Buy Package" 按钮点击 */
|
|
onBuyPackage: () => void;
|
|
}
|
|
|
|
/**
|
|
* Voice Message Package 卡片
|
|
*
|
|
* 视觉规格（与设计稿对齐）：
|
|
* - 白色卡片 + 粉色→橙色渐变描边
|
|
* - 标题 "Voice Message Package"（粉色加粗）
|
|
* - "0min/0min used/remaining" 文案（前缀粉色加粗）
|
|
* - 底部 "Buy Package" 粉色胶囊按钮
|
|
*/
|
|
export function VoicePackageCard({
|
|
usedMinutes,
|
|
totalMinutes,
|
|
onBuyPackage,
|
|
}: VoicePackageCardProps) {
|
|
return (
|
|
<section className={styles.card}>
|
|
<div className={styles.content}>
|
|
<div className={styles.copy}>
|
|
<header className={styles.header}>
|
|
<h2 className={styles.title}>Voice Message Package</h2>
|
|
</header>
|
|
|
|
<p className={styles.usage}>
|
|
<span className={styles.usedNumber}>{usedMinutes}</span>
|
|
<span className={styles.usageUnit}>min/</span>
|
|
<span className={styles.totalNumber}>{totalMinutes}</span>
|
|
<span className={styles.usageUnit}>min</span>
|
|
<span className={styles.usageText}>{"\u00a0\u00a0"}used/remaining</span>
|
|
</p>
|
|
|
|
<div className={styles.footer}>
|
|
<button
|
|
type="button"
|
|
className={styles.buyBtn}
|
|
onClick={onBuyPackage}
|
|
aria-label="Buy Package"
|
|
>
|
|
Buy Package
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.micIcon} aria-hidden="true">
|
|
<Image
|
|
src="/images/sidebar/ic_user_voicemessage.png"
|
|
alt=""
|
|
width={100}
|
|
height={100}
|
|
className={styles.micImage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|