95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
import { useState, FC } from 'react';
|
|
import { cn } from '../../../../lib/cn';
|
|
import { ChevroneDown } from '../../../../assets/icons/groups';
|
|
import MyContestItem from './MyContestItem';
|
|
import RegisterContestItem from './RegisterContestItem';
|
|
import { Contest } from '../../../../redux/slices/contests';
|
|
|
|
interface ContestsBlockProps {
|
|
contests: Contest[];
|
|
title: string;
|
|
className?: string;
|
|
type?: 'my' | 'reg';
|
|
}
|
|
|
|
const ContestsBlock: FC<ContestsBlockProps> = ({
|
|
contests,
|
|
title,
|
|
className,
|
|
type = 'my',
|
|
}) => {
|
|
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>{title}</span>
|
|
<img
|
|
src={ChevroneDown}
|
|
className={cn(
|
|
'transition-all duration-300',
|
|
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) => {
|
|
return type == 'my' ? (
|
|
<MyContestItem
|
|
key={i}
|
|
id={v.id}
|
|
name={v.name}
|
|
startAt={v.startsAt}
|
|
statusRegister={'reg'}
|
|
duration={
|
|
new Date(v.endsAt).getTime() -
|
|
new Date(v.startsAt).getTime()
|
|
}
|
|
members={v.members.length}
|
|
type={i % 2 ? 'second' : 'first'}
|
|
/>
|
|
) : (
|
|
<RegisterContestItem
|
|
key={i}
|
|
id={v.id}
|
|
name={v.name}
|
|
startAt={v.startsAt}
|
|
statusRegister={'reg'}
|
|
duration={
|
|
new Date(v.endsAt).getTime() -
|
|
new Date(v.startsAt).getTime()
|
|
}
|
|
members={v.members.length}
|
|
type={i % 2 ? 'second' : 'first'}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContestsBlock;
|