62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
'use client';
|
||
import { FC, useState } from 'react';
|
||
import styles from '@/components/tasks/Tasks.module.css';
|
||
import Image from 'next/image';
|
||
|
||
interface ITaskContent {
|
||
taskId: number;
|
||
link: string;
|
||
status: string | undefined;
|
||
prize: number;
|
||
handleClaimPrize: (taskId: number, prize: number) => Promise<void>;
|
||
}
|
||
|
||
const TaskContent: FC<ITaskContent> = ({ taskId, status, prize, handleClaimPrize }) => {
|
||
const [isClaiming, setIsClaiming] = useState(false);
|
||
|
||
const onClaim = () => {
|
||
setIsClaiming(true);
|
||
handleClaimPrize(taskId, prize).catch(err => {
|
||
console.error(err);
|
||
setIsClaiming(false);
|
||
});
|
||
};
|
||
if (status) {
|
||
if (status === 'pending_prize') {
|
||
return (
|
||
<>
|
||
<button className={styles.claimPrize} onClick={onClaim} disabled={isClaiming}>
|
||
{`Получить +${prize}`}
|
||
<Image
|
||
src={'/icons/small-robucks-icon.svg'}
|
||
alt={'small coin icon'}
|
||
width={18}
|
||
height={18}
|
||
/>
|
||
</button>
|
||
</>
|
||
);
|
||
} else if (status === 'claimed') {
|
||
return (
|
||
<div className={styles.claimedPrize}>
|
||
<span>Выполнено</span>
|
||
</div>
|
||
);
|
||
}
|
||
} else {
|
||
return (
|
||
<div className={styles.taskPrize}>
|
||
<span>+ {prize}</span>
|
||
<Image
|
||
src={'/icons/small-robucks-icon.svg'}
|
||
alt={'small coin icon'}
|
||
width={18}
|
||
height={18}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
export default TaskContent;
|