add contests

2025-12-05 23:42:18 +03:00
parent 358c7def78
commit fd34761745
36 changed files with 2518 additions and 710 deletions
--- a/src/views/home/group/contests/ContestsBlock.tsx
+++ b/src/views/home/group/contests/ContestsBlock.tsx
@@ -0,0 +1,112 @@
+import { useState, FC } from 'react';
+import { cn } from '../../../../lib/cn';
+import { ChevroneDown } from '../../../../assets/icons/groups';
+import { Contest } from '../../../../redux/slices/contests';
+import PastContestItem from './PastContestItem';
+import UpcoingContestItem from './UpcomingContestItem';
+
+interface ContestsBlockProps {
+    contests: Contest[];
+    title: string;
+    className?: string;
+    type: 'upcoming' | 'past';
+    groupId: number;
+}
+
+const ContestsBlock: FC<ContestsBlockProps> = ({
+    contests,
+    title,
+    className,
+    type,
+    groupId,
+}) => {
+    const [active, setActive] = useState<boolean>(title != 'Скрытые');
+
+    return (
+        <div
+            className={cn(
+                ' border-b-[1px] border-b-liquid-lighter rounded-[10px]',
+                className,
+            )}
+        >
+            <div
+                className={cn(
+                    ' h-[40px] text-[24px] font-bold flex gap-[10px] items-center cursor-pointer border-b-[1px] border-b-transparent transition-all duration-300',
+                    active && 'border-b-liquid-lighter',
+                )}
+                onClick={() => {
+                    setActive(!active);
+                }}
+            >
+                <span className=" select-none">{title}</span>
+                <img
+                    src={ChevroneDown}
+                    className={cn(
+                        'transition-all duration-300 select-none',
+                        active && 'rotate-180',
+                    )}
+                />
+            </div>
+            <div
+                className={cn(
+                    ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
+                    active && 'grid-rows-[1fr] opacity-100',
+                )}
+            >
+                <div className="overflow-hidden">
+                    <div className="pb-[10px] pt-[20px]">
+                        {contests.map((v, i) => {
+                            if (type == 'past') {
+                                return (
+                                    <PastContestItem
+                                        groupId={groupId}
+                                        key={i}
+                                        contestId={v.id}
+                                        scheduleType={v.scheduleType}
+                                        name={v.name}
+                                        startsAt={
+                                            v.startsAt ?? new Date().toString()
+                                        }
+                                        endsAt={
+                                            v.endsAt ?? new Date().toString()
+                                        }
+                                        attemptDurationMinutes={
+                                            v.attemptDurationMinutes ?? 0
+                                        }
+                                        type={i % 2 ? 'second' : 'first'}
+                                    />
+                                );
+                            }
+
+                            if (type == 'upcoming') {
+                                return (
+                                    <UpcoingContestItem
+                                        groupId={groupId}
+                                        key={i}
+                                        contestId={v.id}
+                                        scheduleType={v.scheduleType}
+                                        name={v.name}
+                                        startsAt={
+                                            v.startsAt ?? new Date().toString()
+                                        }
+                                        endsAt={
+                                            v.endsAt ?? new Date().toString()
+                                        }
+                                        attemptDurationMinutes={
+                                            v.attemptDurationMinutes ?? 0
+                                        }
+                                        type={i % 2 ? 'second' : 'first'}
+                                    />
+                                );
+                            }
+
+                            return <></>;
+                        })}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ContestsBlock;