91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { FaCoins } from "react-icons/fa6";
|
|
|
|
import styles from "./sidebar-wallet-card.module.css";
|
|
|
|
export interface SidebarWalletCardProps {
|
|
creditBalance: number;
|
|
dailyFreeChatLimit?: number;
|
|
dailyFreeChatRemaining?: number;
|
|
dailyFreePrivateLimit?: number;
|
|
dailyFreePrivateRemaining?: number;
|
|
onActivateVip?: () => void;
|
|
onTopUp: () => void;
|
|
onRulesClick: () => void;
|
|
}
|
|
|
|
const formatCoins = (value: number): string =>
|
|
new Intl.NumberFormat("en-US").format(Math.max(0, Math.trunc(value)));
|
|
|
|
export function SidebarWalletCard({
|
|
creditBalance,
|
|
dailyFreeChatLimit = 0,
|
|
dailyFreeChatRemaining = 0,
|
|
dailyFreePrivateLimit = 0,
|
|
dailyFreePrivateRemaining = 0,
|
|
onActivateVip,
|
|
onTopUp,
|
|
onRulesClick,
|
|
}: SidebarWalletCardProps) {
|
|
return (
|
|
<section className={styles.card} aria-label="My wallet">
|
|
<div className={styles.leftColumn}>
|
|
<div className={styles.titleRow}>
|
|
<span className={styles.iconWrap} aria-hidden="true">
|
|
<FaCoins size={18} />
|
|
</span>
|
|
<h2 className={styles.title}>My Wallet</h2>
|
|
</div>
|
|
|
|
<p className={styles.balance}>
|
|
<span className={styles.balanceValue}>{formatCoins(creditBalance)}</span>
|
|
<span className={styles.balanceUnit}> coins</span>
|
|
</p>
|
|
|
|
<button
|
|
type="button"
|
|
className={styles.rulesButton}
|
|
onClick={onRulesClick}
|
|
>
|
|
Coin Usage Rules
|
|
</button>
|
|
</div>
|
|
|
|
<div className={styles.actionColumn}>
|
|
{onActivateVip ? (
|
|
<button
|
|
type="button"
|
|
className={styles.activateButton}
|
|
onClick={onActivateVip}
|
|
>
|
|
Activate VIP
|
|
</button>
|
|
) : null}
|
|
<button type="button" className={styles.topUpButton} onClick={onTopUp}>
|
|
Top Up
|
|
</button>
|
|
</div>
|
|
|
|
<div className={styles.freeAllowance} aria-label="Free allowance">
|
|
<p className={styles.freeAllowanceTitle}>Free Allowance</p>
|
|
<div className={styles.freeAllowanceContent}>
|
|
<div className={styles.freeAllowanceItems}>
|
|
<span className={styles.freeAllowanceItem}>
|
|
<strong>{dailyFreeChatRemaining}</strong>
|
|
<span> chats left</span>
|
|
</span>
|
|
<span className={styles.freeAllowanceItem}>
|
|
<strong>{dailyFreePrivateRemaining}</strong>
|
|
<span> private left</span>
|
|
</span>
|
|
</div>
|
|
<p className={styles.dailyFreeLimit}>
|
|
Daily free: {dailyFreeChatLimit} chats / {dailyFreePrivateLimit} private
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|