113 lines
4.3 KiB
TypeScript
113 lines
4.3 KiB
TypeScript
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;
|