65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, useState } from 'react';
|
|
import { BookmakerCode, generateBetSlipUrl } from '@/lib/betting-utils';
|
|
|
|
const logoMap: Record<BookmakerCode, string> = {
|
|
bet365: 'Bet365',
|
|
pinnacle: 'Pinnacle',
|
|
draftkings: 'DraftKings',
|
|
};
|
|
|
|
type Props = {
|
|
bookmakerId: BookmakerCode;
|
|
matchId: string;
|
|
selection: string;
|
|
odds: number;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export function QuickBetButton({ bookmakerId, matchId, selection, odds, disabled = false }: Props) {
|
|
const [isRedirecting, setIsRedirecting] = useState(false);
|
|
|
|
const label = logoMap[bookmakerId];
|
|
const oddsText = odds.toFixed(2);
|
|
|
|
const href = useMemo(
|
|
() =>
|
|
generateBetSlipUrl({
|
|
bookmakerId,
|
|
matchId,
|
|
selection,
|
|
odds,
|
|
}),
|
|
[bookmakerId, matchId, selection, odds],
|
|
);
|
|
|
|
const handleClick = () => {
|
|
if (disabled) {
|
|
return;
|
|
}
|
|
setIsRedirecting(true);
|
|
window.open(href, '_blank', 'noopener,noreferrer');
|
|
window.setTimeout(() => setIsRedirecting(false), 900);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
disabled={disabled}
|
|
className={`group relative inline-flex min-w-40 items-center justify-center rounded-full bg-[#7d2a15] px-4 py-2 text-sm text-white transition ${
|
|
disabled ? 'cursor-not-allowed opacity-60' : 'hover:bg-[#5f1f11]'
|
|
}`}
|
|
>
|
|
<span className="dot-matrix text-sm">{isRedirecting ? '輸入中...' : `${label} ${oddsText}`}</span>
|
|
{!isRedirecting ? (
|
|
<span className="absolute -top-1 -right-2 hidden rounded-full bg-[#d1432d] px-2 py-0.5 text-[10px] text-white transition group-hover:inline">{oddsText}</span>
|
|
) : null}
|
|
{isRedirecting ? (
|
|
<span className="dot-matrix ml-2 inline-block dot-matrix-loading text-[10px]">10110</span>
|
|
) : null}
|
|
</button>
|
|
);
|
|
}
|