64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { useState, FC } from "react";
|
|
import { cn } from "../../../lib/cn";
|
|
import { ChevroneDown } from "../../../assets/icons/groups";
|
|
import ContestItem from "./ContestItem";
|
|
|
|
|
|
interface Contest {
|
|
id: number;
|
|
name: string;
|
|
authors: string[];
|
|
startAt: string;
|
|
registerAt: string;
|
|
duration: number;
|
|
members: number;
|
|
statusRegister: "reg" | "nonreg";
|
|
}
|
|
|
|
interface GroupsBlockProps {
|
|
contests: Contest[];
|
|
title: string;
|
|
className?: string;
|
|
}
|
|
|
|
|
|
const GroupsBlock: FC<GroupsBlockProps> = ({ contests, title, className }) => {
|
|
|
|
|
|
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) => <ContestItem key={i} {...v} type={i % 2 ? "second" : "first"} />)
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GroupsBlock;
|