43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
'use client';
|
||
|
||
type MoneyFlowBarProps = {
|
||
label: string;
|
||
ticketPct: number;
|
||
handlePct: number;
|
||
};
|
||
|
||
export function MoneyFlowBar({ label, ticketPct, handlePct }: MoneyFlowBarProps) {
|
||
const alert = handlePct - ticketPct >= 20;
|
||
|
||
return (
|
||
<article className="panel-glow rounded-2xl p-4">
|
||
<p className="dot-matrix text-sm text-[#7d2a15]">{label}</p>
|
||
<div className="mt-2">
|
||
<p className="text-xs text-[#8a6b58]">投注筆數：{ticketPct.toFixed(1)}%</p>
|
||
<div className="mt-1 h-3 w-full overflow-hidden rounded-full bg-[#ece0ca]">
|
||
<div
|
||
className="h-full rounded-full bg-[#b68a65]"
|
||
style={{ width: `${Math.min(ticketPct, 100)}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-3">
|
||
<p className="text-xs text-[#8a6b58]">資金占比：{handlePct.toFixed(1)}%</p>
|
||
<div className="mt-1 h-3 w-full overflow-hidden rounded-full bg-[#ece0ca]">
|
||
<div
|
||
className={`h-full rounded-full ${alert ? 'bg-[#d1432d]' : 'bg-[#dcb53b]'}`}
|
||
style={{ width: `${Math.min(handlePct, 100)}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{alert ? (
|
||
<p className="mt-2 text-sm text-[#8c2f2f]">聰明錢警示：資金比例高於票數超過 20%</p>
|
||
) : (
|
||
<p className="mt-2 text-sm text-[#6f4f3c]">目前無明顯聰明錢偏離</p>
|
||
)}
|
||
</article>
|
||
);
|
||
}
|