57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { RotateCcw } from "lucide-react";
|
|
import { BoothConfig } from "@/types/booth";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
interface RateLimitedScreenProps {
|
|
config: BoothConfig;
|
|
resetMinutes: number;
|
|
onReset: () => void;
|
|
}
|
|
|
|
export const RateLimitedScreen: React.FC<RateLimitedScreenProps> = ({
|
|
config,
|
|
resetMinutes,
|
|
onReset,
|
|
}) => {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className="relative flex-1 flex flex-col items-center justify-center p-8 text-center select-none space-y-6">
|
|
<div className="w-24 h-24 rounded-full bg-gradient-to-tr from-purple-900 to-orange-950 flex items-center justify-center border-2 border-orange-500/40 shadow-[0_0_30px_rgba(255,109,0,0.3)]">
|
|
<span className="text-4xl animate-bounce">⏳</span>
|
|
</div>
|
|
|
|
<div className="space-y-2 max-w-xs">
|
|
<h2 className="text-2xl font-black text-white tracking-wide drop-shadow-[0_2px_0_#090314]">
|
|
{t({ en: "Martial Energy Cooling Down! ⚡", zh: "武道气合修整中！⚡" })}
|
|
</h2>
|
|
<p className="text-amber-200/90 text-sm leading-relaxed font-bold">
|
|
{t({
|
|
en: "You have conjured the maximum number of Halloween portraits for this session.",
|
|
zh: "当前设备生成的万圣武道照已达上限，稍作休息吧！"
|
|
})}
|
|
</p>
|
|
{resetMinutes > 0 && (
|
|
<p className="text-slate-300 text-xs mt-2 bg-black/40 px-3 py-1.5 rounded-full border border-purple-500/30">
|
|
{t({
|
|
en: `More energy ready in approx ${resetMinutes} minutes.`,
|
|
zh: `预计约 ${resetMinutes} 分钟后恢复。`
|
|
})}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={onReset}
|
|
className="px-6 py-3.5 rounded-2xl btn-cartoon-orange text-white font-black text-sm shadow-xl flex items-center space-x-2 transition active:scale-95"
|
|
>
|
|
<RotateCcw size={18} />
|
|
<span>{t({ en: "Return to Dojo 🥋", zh: "返回万圣道馆 🥋" })}</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|