pages

src/views/home/contests/ContestsBlock.tsx

@@ -0,0 +1,64 @@
+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={() => {
+                    console.log(active);
+                    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;