my contests

2025-11-06 00:41:01 +03:00
parent 4a65aa4b53
commit dc6df1480e
7 changed files with 354 additions and 121 deletions
--- a/src/views/home/account/contests/RegisterContestItem.tsx
+++ b/src/views/home/account/contests/RegisterContestItem.tsx
@@ -0,0 +1,124 @@
+import { cn } from '../../../../lib/cn';
+import { Account } from '../../../../assets/icons/auth';
+import { PrimaryButton } from '../../../../components/button/PrimaryButton';
+import { ReverseButton } from '../../../../components/button/ReverseButton';
+import { useNavigate } from 'react-router-dom';
+
+export interface ContestItemProps {
+    id: number;
+    name: string;
+    startAt: string;
+    duration: number;
+    members: number;
+    statusRegister: 'reg' | 'nonreg';
+    type: 'first' | 'second';
+}
+
+function formatDate(dateString: string): string {
+    const date = new Date(dateString);
+
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+
+    return `${day}/${month}/${year}\n${hours}:${minutes}`;
+}
+
+function formatWaitTime(ms: number): string {
+    const minutes = Math.floor(ms / 60000);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) {
+        const remainder = days % 10;
+        let suffix = 'дней';
+        if (remainder === 1 && days !== 11) suffix = 'день';
+        else if (remainder >= 2 && remainder <= 4 && (days < 10 || days > 20))
+            suffix = 'дня';
+        return `${days} ${suffix}`;
+    } else if (hours > 0) {
+        const mins = minutes % 60;
+        return mins > 0 ? `${hours} ч ${mins} мин` : `${hours} ч`;
+    } else {
+        return `${minutes} мин`;
+    }
+}
+
+const ContestItem: React.FC<ContestItemProps> = ({
+    id,
+    name,
+    startAt,
+    duration,
+    members,
+    statusRegister,
+    type,
+}) => {
+    const navigate = useNavigate();
+
+    const now = new Date();
+
+    const waitTime = new Date(startAt).getTime() - now.getTime();
+
+    return (
+        <div
+            className={cn(
+                'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white  text-[16px] leading-[20px] cursor-pointer',
+                waitTime <= 0 ? 'grid grid-cols-6' : 'grid grid-cols-7',
+                'items-center font-bold text-liquid-white',
+                type == 'first'
+                    ? ' bg-liquid-lighter'
+                    : ' bg-liquid-background',
+            )}
+            onClick={() => {
+                navigate(`/contest/${id}`);
+            }}
+        >
+            <div className="text-left font-bold text-[18px]">{name}</div>
+            <div className="text-center text-liquid-brightmain font-normal ">
+                {/* {authors.map((v, i) => <p key={i}>{v}</p>)} */}
+                valavshonok
+            </div>
+            <div className="text-center  text-nowrap whitespace-pre-line">
+                {formatDate(startAt)}
+            </div>
+            <div className="text-center">{formatWaitTime(duration)}</div>
+            {waitTime > 0 && (
+                <div className="text-center whitespace-pre-line ">
+                    {'До начала\n' + formatWaitTime(waitTime)}
+                </div>
+            )}
+            <div className="items-center justify-center flex gap-[10px] flex-row w-full">
+                <div>{members}</div>
+                <img src={Account} className="h-[24px] w-[24px]" />
+            </div>
+            <div className="flex items-center justify-end">
+                {statusRegister == 'reg' ? (
+                    <>
+                        {' '}
+                        <PrimaryButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                            text="Регистрация"
+                        />
+                    </>
+                ) : (
+                    <>
+                        {' '}
+                        <ReverseButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                            text="Вы записаны"
+                        />
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default ContestItem;