98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import { useState, FC } from 'react';
|
|
import { cn } from '../../../../lib/cn';
|
|
import { ChevroneDown } from '../../../../assets/icons/groups';
|
|
import { ContestItem } from '../../../../redux/slices/profile';
|
|
import PastContestItem from './PastContestItem';
|
|
import UpcoingContestItem from './UpcomingContestItem';
|
|
import EditContestItem from './EditContestItem';
|
|
|
|
interface ContestsBlockProps {
|
|
contests?: ContestItem[];
|
|
title: string;
|
|
className?: string;
|
|
type?: 'edit' | 'upcoming' | 'past';
|
|
}
|
|
|
|
const ContestsBlock: FC<ContestsBlockProps> = ({
|
|
contests,
|
|
title,
|
|
className,
|
|
type = 'edit',
|
|
}) => {
|
|
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
|
|
key={i}
|
|
{...v}
|
|
type={i % 2 ? 'second' : 'first'}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (type == 'upcoming') {
|
|
return (
|
|
<UpcoingContestItem
|
|
key={i}
|
|
{...v}
|
|
type={i % 2 ? 'second' : 'first'}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (type == 'edit') {
|
|
return (
|
|
<EditContestItem
|
|
key={i}
|
|
{...v}
|
|
type={i % 2 ? 'second' : 'first'}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <></>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContestsBlock;
|