41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
'use client';
|
||
|
||
type HedgeAlertProps = {
|
||
isVisible: boolean;
|
||
parlayLabel: string;
|
||
counterSelection: string;
|
||
hedgeStake: number;
|
||
lockedProfit: number;
|
||
};
|
||
|
||
export function HedgeAlert({ isVisible, parlayLabel, counterSelection, hedgeStake, lockedProfit }: HedgeAlertProps) {
|
||
if (!isVisible) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<aside className="fixed bottom-28 right-4 z-50 w-[min(340px,calc(100vw-2rem))] rounded-2xl border-2 border-[#fbbf24] bg-[#032f26] p-4 text-white shadow-2xl shadow-[#f59e0b]/35">
|
||
<p className="dot-matrix text-sm animate-pulse text-[#fef3c7]">🔒 鎖利機會出現</p>
|
||
<p className="mt-2 text-xs text-[#f3e6c6]">
|
||
您的 {parlayLabel} 已進入收斂臨界，最後一場可反向鎖利。
|
||
</p>
|
||
<p className="mt-3 text-sm text-[#ffd26d]">
|
||
對手選項：<span className="font-semibold">{counterSelection}</span>
|
||
</p>
|
||
<p className="mt-2 text-sm">
|
||
建議對沖下注：<span className="font-bold text-[#fca5a5]">${hedgeStake.toFixed(2)}</span>
|
||
</p>
|
||
<p className="mt-1 text-sm">
|
||
鎖定利潤：<span className="font-bold text-[#86efac]">${lockedProfit.toFixed(2)}</span>
|
||
</p>
|
||
<button
|
||
type="button"
|
||
className="dot-matrix mt-3 rounded-full bg-[#16a34a] px-3 py-2 text-xs text-black transition hover:bg-[#22c55e]"
|
||
onClick={() => window.alert('請先至下注頁面進行對沖下單。')}
|
||
>
|
||
一鍵對沖
|
||
</button>
|
||
</aside>
|
||
);
|
||
}
|