85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
import { FC } from 'react';
|
||
import styles from '@/components/home/Home.module.css';
|
||
import Image from 'next/image';
|
||
|
||
interface IButtonMining {
|
||
isLoading: boolean;
|
||
typeButton: 'pending' | 'farming' | 'claim_reward';
|
||
remainingTime: string | null;
|
||
farm_amount: number | undefined;
|
||
handleStartFarming: () => void;
|
||
handleClaimRewards: () => void;
|
||
}
|
||
|
||
const ButtonMining: FC<IButtonMining> = ({
|
||
isLoading,
|
||
typeButton,
|
||
remainingTime,
|
||
farm_amount,
|
||
handleStartFarming,
|
||
handleClaimRewards,
|
||
}) => {
|
||
if (typeButton === 'pending') {
|
||
return (
|
||
<>
|
||
<button
|
||
className={
|
||
isLoading
|
||
? `${styles.disabledButton} ${styles.miningButton}`
|
||
: `${styles.miningButton}`
|
||
}
|
||
disabled={isLoading}
|
||
onClick={handleStartFarming}
|
||
>
|
||
Начать добычу
|
||
</button>
|
||
</>
|
||
);
|
||
}
|
||
if (typeButton === 'farming' && remainingTime) {
|
||
return (
|
||
<>
|
||
<button
|
||
className={
|
||
isLoading
|
||
? `${styles.disabledButton} ${styles.farmingButton}`
|
||
: `${styles.farmingButton}`
|
||
}
|
||
>{`Собрать добычу через ${remainingTime}`}</button>
|
||
</>
|
||
);
|
||
}
|
||
if (typeButton === 'claim_reward') {
|
||
return (
|
||
<>
|
||
<button
|
||
className={
|
||
isLoading
|
||
? `${styles.disabledButton} ${styles.claimReward}`
|
||
: `${styles.claimReward}`
|
||
}
|
||
onClick={handleClaimRewards}
|
||
>
|
||
<div className={styles.reward}>
|
||
<span>Собрать добычу </span>
|
||
<div className={styles.claimAmount}>
|
||
<span>+</span>
|
||
<Image
|
||
src={'/icons/small-robucks-icon.svg'}
|
||
alt={'small robucks'}
|
||
width={18}
|
||
height={18}
|
||
/>
|
||
<span>{farm_amount}</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</>
|
||
);
|
||
}
|
||
};
|
||
|
||
export default ButtonMining;
|