pages
This commit is contained in:
Виталий Лавшонок
72
src/views/home/contests/ContestItem.tsx
Normal file
72
src/views/home/contests/ContestItem.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { cn } from "../../../lib/cn";
|
||||
|
||||
export interface ContestItemProps {
|
||||
id: number;
|
||||
name: string;
|
||||
authors: string[];
|
||||
startAt: string;
|
||||
registerAt: string;
|
||||
duration: number;
|
||||
members: number;
|
||||
statusRegister: "reg" | "nonreg";
|
||||
type: "first" | "second";
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const year = date.getFullYear();
|
||||
|
||||
const hours = date.getHours().toString().padStart(2, "0");
|
||||
const minutes = date.getMinutes().toString().padStart(2, "0");
|
||||
|
||||
return `${day}/${month}/${year}\n${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const ContestItem: React.FC<ContestItemProps> = ({
|
||||
id, name, authors, startAt, registerAt, duration, members, statusRegister, type
|
||||
}) => {
|
||||
const now = new Date();
|
||||
|
||||
const waitTime = new Date(startAt).getTime() - now.getTime();
|
||||
|
||||
return (
|
||||
<div className={cn("w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white",
|
||||
waitTime <= 0 ? "grid grid-cols-6" : "grid grid-cols-7",
|
||||
"items-center font-bold text-liquid-white",
|
||||
type == "first" ? " bg-liquid-lighter" : " bg-liquid-background"
|
||||
)}>
|
||||
<div className="text-left">
|
||||
{name}
|
||||
</div>
|
||||
<div className="text-center text-liquid-brightmain font-normal">
|
||||
{authors.map((v, i) => <p key={i}>{v}</p>)}
|
||||
</div>
|
||||
<div className="text-center text-nowrap">
|
||||
{formatDate(startAt)}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
{duration}
|
||||
</div>
|
||||
{
|
||||
waitTime > 0 &&
|
||||
<div className="text-center">
|
||||
{waitTime}
|
||||
</div>
|
||||
}
|
||||
<div className="text-center">
|
||||
{members}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
{statusRegister}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContestItem;
|
||||
131
src/views/home/contests/Contests.tsx
Normal file
131
src/views/home/contests/Contests.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { useEffect } from "react";
|
||||
import { SecondaryButton } from "../../../components/button/SecondaryButton";
|
||||
import { cn } from "../../../lib/cn";
|
||||
import { useAppDispatch } from "../../../redux/hooks";
|
||||
import ContestsBlock from "./ContestsBlock";
|
||||
import { setMenuActivePage } from "../../../redux/slices/store";
|
||||
|
||||
|
||||
interface Contest {
|
||||
id: number;
|
||||
name: string;
|
||||
authors: string[];
|
||||
startAt: string;
|
||||
registerAt: string;
|
||||
duration: number;
|
||||
members: number;
|
||||
statusRegister: "reg" | "nonreg";
|
||||
}
|
||||
|
||||
|
||||
|
||||
const Contests = () => {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const now = new Date();
|
||||
const contests: Contest[] = [
|
||||
// === Прошедшие контесты ===
|
||||
{
|
||||
id: 1,
|
||||
name: "Code Marathon 2025",
|
||||
authors: ["tourist", "Petr", "Semen", "Rotar"],
|
||||
startAt: "2025-09-15T10:00:00.000Z",
|
||||
registerAt: "2025-09-10T10:00:00.000Z",
|
||||
duration: 180,
|
||||
members: 4821,
|
||||
statusRegister: "reg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Autumn Cup 2025",
|
||||
authors: ["awoo", "Benq"],
|
||||
startAt: "2025-09-25T17:00:00.000Z",
|
||||
registerAt: "2025-09-20T17:00:00.000Z",
|
||||
duration: 150,
|
||||
members: 3670,
|
||||
statusRegister: "nonreg",
|
||||
},
|
||||
|
||||
// === Контесты, которые сейчас идут ===
|
||||
{
|
||||
id: 3,
|
||||
name: "Halloween Challenge",
|
||||
authors: ["Errichto", "Radewoosh"],
|
||||
startAt: "2025-10-29T10:00:00.000Z", // начался сегодня
|
||||
registerAt: "2025-10-25T10:00:00.000Z",
|
||||
duration: 240,
|
||||
members: 5123,
|
||||
statusRegister: "reg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "October Blitz",
|
||||
authors: ["neal", "Um_nik"],
|
||||
startAt: "2025-10-29T12:00:00.000Z",
|
||||
registerAt: "2025-10-24T12:00:00.000Z",
|
||||
duration: 300,
|
||||
members: 2890,
|
||||
statusRegister: "nonreg",
|
||||
},
|
||||
|
||||
// === Контесты, которые еще не начались ===
|
||||
{
|
||||
id: 5,
|
||||
name: "Winter Warmup",
|
||||
authors: ["tourist", "rng_58"],
|
||||
startAt: "2025-11-05T18:00:00.000Z",
|
||||
registerAt: "2025-11-01T18:00:00.000Z",
|
||||
duration: 180,
|
||||
members: 2100,
|
||||
statusRegister: "reg",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Global Coding Cup",
|
||||
authors: ["maroonrk", "kostka"],
|
||||
startAt: "2025-11-12T15:00:00.000Z",
|
||||
registerAt: "2025-11-08T15:00:00.000Z",
|
||||
duration: 240,
|
||||
members: 1520,
|
||||
statusRegister: "nonreg",
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setMenuActivePage("contests"))
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className=" h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
|
||||
<div className="h-full box-border">
|
||||
|
||||
<div className="relative flex items-center mb-[20px]">
|
||||
<div className={cn("h-[50px] text-[40px] font-bold text-liquid-white flex items-center")}>
|
||||
Контесты
|
||||
</div>
|
||||
<SecondaryButton
|
||||
onClick={() => { }}
|
||||
text="Создать группу"
|
||||
className="absolute right-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-liquid-lighter h-[50px] mb-[20px]">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ContestsBlock className="mb-[20px]" title="Текущие" contests={contests.filter(contest => {
|
||||
const endTime = new Date(contest.startAt).getTime() + contest.duration * 60 * 1000;
|
||||
return endTime >= now.getTime();
|
||||
})} />
|
||||
<ContestsBlock className="mb-[20px]" title="Прошедшие" contests={contests.filter(contest => {
|
||||
const endTime = new Date(contest.startAt).getTime() + contest.duration * 60 * 1000;
|
||||
return endTime < now.getTime();
|
||||
})} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contests;
|
||||
64
src/views/home/contests/ContestsBlock.tsx
Normal file
64
src/views/home/contests/ContestsBlock.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user