79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { useState, FC } from 'react';
|
|
import { cn } from '../../../../lib/cn';
|
|
import { ChevroneDown } from '../../../../assets/icons/groups';
|
|
import MyMissionItem from './MyMissionItem';
|
|
import { MissionItem } from '../../../../redux/slices/profile';
|
|
|
|
interface MissionsBlockProps {
|
|
missions: MissionItem[];
|
|
title: string;
|
|
className?: string;
|
|
setTastDeleteId: (v: number) => void;
|
|
setDeleteModalActive: (v: boolean) => void;
|
|
}
|
|
|
|
const MissionsBlock: FC<MissionsBlockProps> = ({
|
|
missions,
|
|
title,
|
|
className,
|
|
|
|
setTastDeleteId,
|
|
setDeleteModalActive,
|
|
}) => {
|
|
const [active, setActive] = useState<boolean>(true);
|
|
|
|
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]">
|
|
{missions.map((v, i) => (
|
|
<MyMissionItem
|
|
key={i}
|
|
id={v.missionId}
|
|
name={v.missionName}
|
|
timeLimit={v.timeLimitMilliseconds}
|
|
memoryLimit={v.memoryLimitBytes}
|
|
difficulty={v.difficultyValue}
|
|
type={i % 2 ? 'second' : 'first'}
|
|
setTastDeleteId={setTastDeleteId}
|
|
setDeleteModalActive={setDeleteModalActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MissionsBlock;
|