Initial commit: Tapalka monorepo (bot, front, strapi)

CMyTapper/robucks-front/components/tasks/TaskContent.tsx

@@ -0,0 +1,61 @@
+'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;