99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import { cn } from '../../../../lib/cn';
|
|
import { Account } from '../../../../assets/icons/auth';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Edit } from '../../../../assets/icons/input';
|
|
|
|
export interface ContestItemProps {
|
|
id: number;
|
|
name: string;
|
|
startAt: string;
|
|
duration: number;
|
|
members: number;
|
|
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}`;
|
|
}
|
|
|
|
function formatWaitTime(ms: number): string {
|
|
const minutes = Math.floor(ms / 60000);
|
|
const hours = Math.floor(minutes / 60);
|
|
const days = Math.floor(hours / 24);
|
|
|
|
if (days > 0) {
|
|
const remainder = days % 10;
|
|
let suffix = 'дней';
|
|
if (remainder === 1 && days !== 11) suffix = 'день';
|
|
else if (remainder >= 2 && remainder <= 4 && (days < 10 || days > 20))
|
|
suffix = 'дня';
|
|
return `${days} ${suffix}`;
|
|
} else if (hours > 0) {
|
|
const mins = minutes % 60;
|
|
return mins > 0 ? `${hours} ч ${mins} мин` : `${hours} ч`;
|
|
} else {
|
|
return `${minutes} мин`;
|
|
}
|
|
}
|
|
|
|
const ContestItem: React.FC<ContestItemProps> = ({
|
|
id,
|
|
name,
|
|
startAt,
|
|
duration,
|
|
members,
|
|
type,
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white text-[16px] leading-[20px] cursor-pointer grid grid-cols-[1fr,1fr,110px,110px,110px,24px] items-center font-bold',
|
|
type == 'first'
|
|
? ' bg-liquid-lighter'
|
|
: ' bg-liquid-background',
|
|
)}
|
|
onClick={() => {
|
|
navigate(`/contest/${id}`);
|
|
}}
|
|
>
|
|
<div className="text-left font-bold text-[18px]">{name}</div>
|
|
<div className="text-center text-liquid-brightmain font-normal ">
|
|
{/* {authors.map((v, i) => <p key={i}>{v}</p>)} */}
|
|
valavshonok
|
|
</div>
|
|
<div className="text-center text-nowrap whitespace-pre-line">
|
|
{formatDate(startAt)}
|
|
</div>
|
|
<div className="text-center">{formatWaitTime(duration)}</div>
|
|
<div className="items-center justify-center flex gap-[10px] flex-row w-full">
|
|
<div>{members}</div>
|
|
<img src={Account} className="h-[24px] w-[24px]" />
|
|
</div>
|
|
|
|
<img
|
|
className=" h-[24px] w-[24px] hover:bg-liquid-light rounded-[5px] transition-all duration-300"
|
|
src={Edit}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigate(
|
|
`/contest/create?back=/home/account/contests&contestId=${id}`,
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContestItem;
|