53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Link } from "@/i18n/navigation";
|
|
|
|
interface SwipeQuotaProps {
|
|
vip: boolean;
|
|
used: number;
|
|
limit: number;
|
|
remaining: number;
|
|
t: (key: string) => string;
|
|
}
|
|
|
|
export default function SwipeQuota({ vip, used, limit, remaining, t }: SwipeQuotaProps) {
|
|
if (vip) {
|
|
return (
|
|
<div className="mx-auto mb-3 max-w-md px-4">
|
|
<div className="rounded-full bg-emerald-50 px-4 py-2 text-center text-xs font-semibold text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-200">
|
|
{t("vipUnlimited")}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const pct = Math.min(100, Math.round((used / Math.max(limit, 1)) * 100));
|
|
|
|
return (
|
|
<div className="mx-auto mb-3 max-w-md px-4">
|
|
<div className="rounded-2xl border border-gray-200 bg-white px-4 py-3 dark:border-gray-800 dark:bg-gray-900">
|
|
<div className="mb-2 flex items-center justify-between text-xs">
|
|
<span className="font-medium text-gray-600 dark:text-gray-300">{t("dailyQuota")}</span>
|
|
<span className="text-gray-500 dark:text-gray-400">
|
|
{remaining} / {limit}
|
|
</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
|
|
<div
|
|
className={`h-full rounded-full transition-all ${remaining <= 3 ? "bg-[#ff4d4f]" : "bg-[#ff4d4f]/80"}`}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
{remaining <= 3 ? (
|
|
<p className="mt-2 text-xs text-[#ff4d4f]">
|
|
{t("quotaLow")}{" "}
|
|
<Link href="/pricing" className="font-semibold underline">
|
|
{t("upgradeVip")}
|
|
</Link>
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|