LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contests

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-11-04 19:33:47 +03:00
parent 4972836164
commit cdb5595769
18 changed files with 511 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/button/PrimaryButton.tsx
View File

@@ -5,7 +5,7 @@ interface ButtonProps {
disabled?: boolean;
text?: string;
className?: string;
onClick: () => void;
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
children?: React.ReactNode;
color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success';
}
@@ -60,8 +60,10 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
'[&:focus-visible+*]:outline-liquid-brightmain',
)}
disabled={disabled}
onClick={() => {
onClick();
onClick={(
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
onClick(e);
}}
/>

8
src/components/button/ReverseButton.tsx
View File

@@ -5,7 +5,7 @@ interface ButtonProps {
disabled?: boolean;
text?: string;
className?: string;
onClick: () => void;
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
children?: React.ReactNode;
}
@@ -42,8 +42,10 @@ export const ReverseButton: React.FC<ButtonProps> = ({
'[&:focus-visible+*]:outline-liquid-brightmain',
)}
disabled={disabled}
onClick={() => {
onClick();
onClick={(
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
onClick(e);
}}
/>

6
src/components/button/SecondaryButton.tsx
View File

@@ -5,7 +5,7 @@ interface ButtonProps {
disabled?: boolean;
text?: string;
className?: string;
onClick: () => void;
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
children?: React.ReactNode;
}
@@ -41,8 +41,8 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
'[&:focus-visible+*]:outline-liquid-brightmain',
)}
disabled={disabled}
onClick={() => {
onClick();
onClick={(e) => {
onClick(e);
}}
/>

48
src/components/input/DateRangeInput.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
interface DateRangeInputProps {
startLabel?: string;
endLabel?: string;
startValue?: string;
endValue?: string;
onChange: (field: 'startsAt' | 'endsAt', value: string) => void;
className?: string;
}
const DateRangeInput: React.FC<DateRangeInputProps> = ({
startLabel = 'Дата начала',
endLabel = 'Дата окончания',
startValue,
endValue,
onChange,
className = '',
}) => {
return (
<div className={`flex flex-col gap-2 ${className}`}>
<div>
<label className="block text-sm font-medium text-gray-700">
{startLabel}
</label>
<input
type="datetime-local"
value={startValue}
onChange={(e) => onChange('startsAt', e.target.value)}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
{endLabel}
</label>
<input
type="datetime-local"
value={endValue}
onChange={(e) => onChange('endsAt', e.target.value)}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
</div>
);
};
export default DateRangeInput;

2
src/pages/Home.tsx
View File

@@ -12,6 +12,7 @@ import Groups from '../views/home/groups/Groups';
import Contests from '../views/home/contests/Contests';
import { PrimaryButton } from '../components/button/PrimaryButton';
import Group from '../views/home/groups/Group';
import Contest from '../views/home/contest/Contest';
const Home = () => {
const name = useAppSelector((state) => state.auth.username);
@@ -37,6 +38,7 @@ const Home = () => {
<Route path="group/:groupId" element={<Group />} />
<Route path="groups/*" element={<Groups />} />
<Route path="contests/*" element={<Contests />} />
<Route path="contest/:contestId/*" element={<Contest />} />
<Route
path="*"
element={

78
src/redux/slices/contests.ts
View File

@@ -24,9 +24,9 @@ export interface Contest {
scheduleType: string;
startsAt: string;
endsAt: string;
availableFrom: string | null;
availableUntil: string | null;
attemptDurationMinutes: number | null;
maxAttempts: number | null;
allowEarlyFinish: boolean | null;
groupId: number | null;
groupName: string | null;
missions: Mission[];
@@ -40,30 +40,37 @@ interface ContestsResponse {
}
export interface CreateContestBody {
name: string;
description: string;
scheduleType: 'FixedWindow' | 'Flexible';
startsAt: string;
endsAt: string;
availableFrom: string | null;
availableUntil: string | null;
attemptDurationMinutes: number | null;
groupId: number | null;
missionIds: number[];
articleIds: number[];
participantIds: number[];
organizerIds: number[];
name?: string | null;
description?: string | null;
scheduleType: 'AlwaysOpen' | 'FixedWindow' | 'RollingWindow';
visibility: 'Public' | 'GroupPrivate';
startsAt?: string | null;
endsAt?: string | null;
attemptDurationMinutes?: number | null;
maxAttempts?: number | null;
allowEarlyFinish?: boolean | null;
groupId?: number | null;
missionIds?: number[] | null;
articleIds?: number[] | null;
participantIds?: number[] | null;
organizerIds?: number[] | null;
}
// =====================
// Состояние
// =====================
type Status = 'idle' | 'loading' | 'successful' | 'failed';
interface ContestsState {
contests: Contest[];
selectedContest: Contest | null;
hasNextPage: boolean;
status: 'idle' | 'loading' | 'successful' | 'failed';
statuses: {
fetchList: Status;
fetchById: Status;
create: Status;
};
error: string | null;
}
@@ -71,7 +78,11 @@ const initialState: ContestsState = {
contests: [],
selectedContest: null,
hasNextPage: false,
status: 'idle',
statuses: {
fetchList: 'idle',
fetchById: 'idle',
create: 'idle',
},
error: null,
};
@@ -79,7 +90,6 @@ const initialState: ContestsState = {
// Async Thunks
// =====================
// Получение списка контестов
export const fetchContests = createAsyncThunk(
'contests/fetchAll',
async (
@@ -104,7 +114,6 @@ export const fetchContests = createAsyncThunk(
},
);
// Получение одного контеста по ID
export const fetchContestById = createAsyncThunk(
'contests/fetchById',
async (id: number, { rejectWithValue }) => {
@@ -119,7 +128,6 @@ export const fetchContestById = createAsyncThunk(
},
);
// Создание нового контеста
export const createContest = createAsyncThunk(
'contests/create',
async (contestData: CreateContestBody, { rejectWithValue }) => {
@@ -148,17 +156,26 @@ const contestsSlice = createSlice({
clearSelectedContest: (state) => {
state.selectedContest = null;
},
setContestStatus: (
state,
action: PayloadAction<{
key: keyof ContestsState['statuses'];
status: Status;
}>,
) => {
state.statuses[action.payload.key] = action.payload.status;
},
},
extraReducers: (builder) => {
// fetchContests
builder.addCase(fetchContests.pending, (state) => {
state.status = 'loading';
state.statuses.fetchList = 'loading';
state.error = null;
});
builder.addCase(
fetchContests.fulfilled,
(state, action: PayloadAction<ContestsResponse>) => {
state.status = 'successful';
state.statuses.fetchList = 'successful';
state.contests = action.payload.contests;
state.hasNextPage = action.payload.hasNextPage;
},
@@ -166,47 +183,47 @@ const contestsSlice = createSlice({
builder.addCase(
fetchContests.rejected,
(state, action: PayloadAction<any>) => {
state.status = 'failed';
state.statuses.fetchList = 'failed';
state.error = action.payload;
},
);
// fetchContestById
builder.addCase(fetchContestById.pending, (state) => {
state.status = 'loading';
state.statuses.fetchById = 'loading';
state.error = null;
});
builder.addCase(
fetchContestById.fulfilled,
(state, action: PayloadAction<Contest>) => {
state.status = 'successful';
state.statuses.fetchById = 'successful';
state.selectedContest = action.payload;
},
);
builder.addCase(
fetchContestById.rejected,
(state, action: PayloadAction<any>) => {
state.status = 'failed';
state.statuses.fetchById = 'failed';
state.error = action.payload;
},
);
// createContest
builder.addCase(createContest.pending, (state) => {
state.status = 'loading';
state.statuses.create = 'loading';
state.error = null;
});
builder.addCase(
createContest.fulfilled,
(state, action: PayloadAction<Contest>) => {
state.status = 'successful';
state.statuses.create = 'successful';
state.contests.unshift(action.payload);
},
);
builder.addCase(
createContest.rejected,
(state, action: PayloadAction<any>) => {
state.status = 'failed';
state.statuses.create = 'failed';
state.error = action.payload;
},
);
@@ -216,5 +233,6 @@ const contestsSlice = createSlice({
// =====================
// Экспорты
// =====================
export const { clearSelectedContest } = contestsSlice.actions;
export const { clearSelectedContest, setContestStatus } = contestsSlice.actions;
export const contestsReducer = contestsSlice.reducer;

45
src/views/home/contest/Contest.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { setMenuActivePage } from '../../../redux/slices/store';
import { Navigate, Route, Routes, useParams } from 'react-router-dom';
import { fetchContestById } from '../../../redux/slices/contests';
import ContestMissions from './Missions';
export interface Article {
id: number;
name: string;
tags: string[];
}
const Contest = () => {
const { contestId } = useParams<{ contestId: string }>();
const contestIdNumber =
contestId && /^\d+$/.test(contestId) ? parseInt(contestId, 10) : null;
if (contestIdNumber === null) {
return <Navigate to="/home/contests" replace />;
}
const dispatch = useAppDispatch();
const contest = useAppSelector((state) => state.contests.selectedContest);
useEffect(() => {
dispatch(setMenuActivePage('contest'));
}, []);
useEffect(() => {
dispatch(fetchContestById(contestIdNumber));
}, [contestIdNumber]);
return (
<div>
<Routes>
<Route
path="*"
element={<ContestMissions contest={contest} />}
/>
</Routes>
</div>
);
};
export default Contest;

65
src/views/home/contest/MissionItem.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { cn } from '../../../lib/cn';
import { IconError, IconSuccess } from '../../../assets/icons/missions';
import { useNavigate } from 'react-router-dom';
export interface MissionItemProps {
id: number;
name: string;
timeLimit?: number;
memoryLimit?: number;
type?: 'first' | 'second';
status?: 'empty' | 'success' | 'error';
}
export function formatMilliseconds(ms: number): string {
const rounded = Math.round(ms) / 1000;
const formatted = rounded.toString().replace(/\.?0+$/, '');
return `${formatted} c`;
}
export function formatBytesToMB(bytes: number): string {
const megabytes = Math.floor(bytes / (1024 * 1024));
return `${megabytes} МБ`;
}
const MissionItem: React.FC<MissionItemProps> = ({
id,
name,
timeLimit = 1000,
memoryLimit = 256 * 1024 * 1024,
type,
status,
}) => {
const navigate = useNavigate();
return (
<div
className={cn(
'min-h-[44px] w-full relative rounded-[10px] text-liquid-white',
type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
'grid grid-cols-[80px,2fr,300px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
status == 'error' &&
'border-l-[11px] border-l-liquid-red pl-[9px]',
status == 'success' &&
'border-l-[11px] border-l-liquid-green pl-[9px]',
'cursor-pointer brightness-100 hover:brightness-125 transition-all duration-300',
)}
onClick={() => {
navigate(`/mission/${id}`);
}}
>
<div className="text-[18px] font-bold">#{id}</div>
<div className="text-[18px] font-bold">{name}</div>
<div className="text-[12px] text-right">
стандартный ввод/вывод {formatMilliseconds(timeLimit)},{' '}
{formatBytesToMB(memoryLimit)}
</div>
<div className="h-[24px] w-[24px]">
{status == 'error' && <img src={IconError} />}
{status == 'success' && <img src={IconSuccess} />}
</div>
</div>
);
};
export default MissionItem;

42
src/views/home/contest/Missions.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { FC } from 'react';
import { useAppDispatch } from '../../../redux/hooks';
import MissionItem, { MissionItemProps } from './MissionItem';
import { Contest } from '../../../redux/slices/contests';
export interface Article {
id: number;
name: string;
tags: string[];
}
interface ContestMissionsProps {
contest: Contest | null;
}
const ContestMissions: FC<ContestMissionsProps> = ({ contest }) => {
if (!contest) {
return <></>;
}
return (
<div className=" h-screen grid grid-rows-[74px,1fr] p-[20px] gap-[20px]">
<div className=""></div>
<div className="h-full min-h-0 overflow-y-scroll medium-scrollbar flex flex-col gap-[20px]">
<div className="h-[40px] w-ufll ">
{contest?.name} {contest.id}
</div>
<div className="w-full">
{contest.missions.map((v, i) => (
<MissionItem
id={v.missionId}
name={v.name}
type={i % 2 ? 'second' : 'first'}
/>
))}
</div>
</div>
</div>
);
};
export default ContestMissions;

0
src/views/home/contest/Submissions.tsx Normal file
View File

24
src/views/home/contests/ContestItem.tsx
View File

@@ -2,8 +2,10 @@ import { cn } from '../../../lib/cn';
import { Account } from '../../../assets/icons/auth';
import { PrimaryButton } from '../../../components/button/PrimaryButton';
import { ReverseButton } from '../../../components/button/ReverseButton';
import { useNavigate } from 'react-router-dom';
export interface ContestItemProps {
id: number;
name: string;
startAt: string;
duration: number;
@@ -46,6 +48,7 @@ function formatWaitTime(ms: number): string {
}
const ContestItem: React.FC<ContestItemProps> = ({
id,
name,
startAt,
duration,
@@ -53,6 +56,8 @@ const ContestItem: React.FC<ContestItemProps> = ({
statusRegister,
type,
}) => {
const navigate = useNavigate();
const now = new Date();
const waitTime = new Date(startAt).getTime() - now.getTime();
@@ -60,13 +65,16 @@ const ContestItem: React.FC<ContestItemProps> = ({
return (
<div
className={cn(
'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white text-[16px] leading-[20px]',
'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white text-[16px] leading-[20px] cursor-pointer',
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',
)}
onClick={() => {
navigate(`/contest/${id}`);
}}
>
<div className="text-left font-bold text-[18px]">{name}</div>
<div className="text-center text-liquid-brightmain font-normal ">
@@ -90,12 +98,22 @@ const ContestItem: React.FC<ContestItemProps> = ({
{statusRegister == 'reg' ? (
<>
{' '}
<PrimaryButton onClick={() => {}} text="Регистрация" />
<PrimaryButton
onClick={(e) => {
e.stopPropagation();
}}
text="Регистрация"
/>
</>
) : (
<>
{' '}
<ReverseButton onClick={() => {}} text="Вы записаны" />
<ReverseButton
onClick={(e) => {
e.stopPropagation();
}}
text="Вы записаны"
/>
</>
)}
</div>

20
src/views/home/contests/Contests.tsx
View File

@@ -1,18 +1,21 @@
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { SecondaryButton } from '../../../components/button/SecondaryButton';
import { cn } from '../../../lib/cn';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import ContestsBlock from './ContestsBlock';
import { setMenuActivePage } from '../../../redux/slices/store';
import { fetchContests } from '../../../redux/slices/contests';
import ModalCreateContest from './ModalCreate';
const Contests = () => {
const dispatch = useAppDispatch();
const now = new Date();
const [modalActive, setModalActive] = useState<boolean>(false);
// Берём данные из Redux
const contests = useAppSelector((state) => state.contests.contests);
const loading = useAppSelector((state) => state.contests.status);
const status = useAppSelector((state) => state.contests.statuses.create);
const error = useAppSelector((state) => state.contests.error);
// При загрузке страницы — выставляем активную вкладку и подгружаем контесты
@@ -21,7 +24,7 @@ const Contests = () => {
dispatch(fetchContests({}));
}, []);
if (loading == 'loading') {
if (status == 'loading') {
return (
<div className="text-liquid-white p-4">Загрузка контестов...</div>
);
@@ -43,8 +46,10 @@ const Contests = () => {
Контесты
</div>
<SecondaryButton
onClick={() => {}}
text="Создать группу"
onClick={() => {
setModalActive(true);
}}
text="Создать контест"
className="absolute right-0"
/>
</div>
@@ -69,6 +74,11 @@ const Contests = () => {
})}
/>
</div>
<ModalCreateContest
active={modalActive}
setActive={setModalActive}
/>
</div>
);
};

1
src/views/home/contests/ContestsBlock.tsx
View File

@@ -53,6 +53,7 @@ const ContestsBlock: FC<ContestsBlockProps> = ({
{contests.map((v, i) => (
<ContestItem
key={i}
id={v.id}
name={v.name}
startAt={v.startsAt}
statusRegister={'reg'}

191
src/views/home/contests/ModalCreate.tsx Normal file
View File

@@ -0,0 +1,191 @@
import { FC, useEffect, useState } from 'react';
import { Modal } from '../../../components/modal/Modal';
import { PrimaryButton } from '../../../components/button/PrimaryButton';
import { SecondaryButton } from '../../../components/button/SecondaryButton';
import { Input } from '../../../components/input/Input';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { createContest } from '../../../redux/slices/contests';
import { CreateContestBody } from '../../../redux/slices/contests';
import DateRangeInput from '../../../components/input/DateRangeInput';
interface ModalCreateContestProps {
active: boolean;
setActive: (value: boolean) => void;
}
const ModalCreateContest: FC<ModalCreateContestProps> = ({
active,
setActive,
}) => {
const dispatch = useAppDispatch();
const status = useAppSelector((state) => state.contests.statuses.create);
const [form, setForm] = useState<CreateContestBody>({
name: '',
description: '',
scheduleType: 'AlwaysOpen',
visibility: 'Public',
startsAt: null,
endsAt: null,
attemptDurationMinutes: null,
maxAttempts: null,
allowEarlyFinish: false,
groupId: null,
missionIds: null,
articleIds: null,
participantIds: null,
organizerIds: null,
});
useEffect(() => {
if (status === 'successful') {
setActive(false);
}
}, [status]);
const handleChange = (key: keyof CreateContestBody, value: any) => {
setForm((prev) => ({ ...prev, [key]: value }));
};
const handleSubmit = () => {
dispatch(createContest(form));
};
return (
<Modal
className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
onOpenChange={setActive}
open={active}
backdrop="blur"
>
<div className="w-[550px]">
<div className="font-bold text-[30px] mb-[10px]">
Создать контест
</div>
<Input
name="name"
type="text"
label="Название"
className="mt-[10px]"
placeholder="Введите название"
onChange={(v) => handleChange('name', v)}
/>
<Input
name="description"
type="text"
label="Описание"
className="mt-[10px]"
placeholder="Введите описание"
onChange={(v) => handleChange('description', v)}
/>
<div className="grid grid-cols-2 gap-[10px] mt-[10px]">
<div>
<label className="block text-sm mb-1">
Тип расписания
</label>
<select
className="w-full p-2 rounded-md bg-liquid-darker border border-liquid-lighter"
value={form.scheduleType}
onChange={(e) =>
handleChange(
'scheduleType',
e.target
.value as CreateContestBody['scheduleType'],
)
}
>
<option value="AlwaysOpen">Всегда открыт</option>
<option value="FixedWindow">
Фиксированные даты
</option>
<option value="RollingWindow">
Скользящее окно
</option>
</select>
</div>
<div>
<label className="block text-sm mb-1">Видимость</label>
<select
className="w-full p-2 rounded-md bg-liquid-darker border border-liquid-lighter"
value={form.visibility}
onChange={(e) =>
handleChange(
'visibility',
e.target
.value as CreateContestBody['visibility'],
)
}
>
<option value="Public">Публичный</option>
<option value="GroupPrivate">Групповой</option>
</select>
</div>
</div>
{/* Даты начала и конца */}
<div className="grid grid-cols-2 gap-[10px] mt-[10px]">
<DateRangeInput
startValue={form.startsAt || ''}
endValue={form.endsAt || ''}
onChange={handleChange}
className="mt-[10px]"
/>
</div>
{/* Продолжительность и лимиты */}
<div className="grid grid-cols-2 gap-[10px] mt-[10px]">
<Input
name="attemptDurationMinutes"
type="number"
label="Длительность попытки (мин)"
placeholder="Например: 60"
onChange={(v) =>
handleChange('attemptDurationMinutes', Number(v))
}
/>
<Input
name="maxAttempts"
type="number"
label="Макс. попыток"
placeholder="Например: 3"
onChange={(v) => handleChange('maxAttempts', Number(v))}
/>
</div>
{/* Разрешить раннее завершение */}
<div className="flex items-center gap-[10px] mt-[15px]">
<input
id="allowEarlyFinish"
type="checkbox"
checked={!!form.allowEarlyFinish}
onChange={(e) =>
handleChange('allowEarlyFinish', e.target.checked)
}
/>
<label htmlFor="allowEarlyFinish">
Разрешить раннее завершение
</label>
</div>
{/* Кнопки */}
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
<PrimaryButton
onClick={handleSubmit}
text="Создать"
disabled={status === 'loading'}
/>
<SecondaryButton
onClick={() => setActive(false)}
text="Отмена"
/>
</div>
</div>
</Modal>
);
};
export default ModalCreateContest;

22
src/views/home/missions/MissionItem.tsx
View File

@@ -4,16 +4,16 @@ import { useNavigate } from 'react-router-dom';
export interface MissionItemProps {
id: number;
authorId: number;
authorId?: number;
name: string;
difficulty: 'Easy' | 'Medium' | 'Hard';
tags: string[];
timeLimit: number;
memoryLimit: number;
createdAt: string;
updatedAt: string;
type: 'first' | 'second';
status: 'empty' | 'success' | 'error';
tags?: string[];
timeLimit?: number;
memoryLimit?: number;
createdAt?: string;
updatedAt?: string;
type?: 'first' | 'second';
status?: 'empty' | 'success' | 'error';
}
export function formatMilliseconds(ms: number): string {
@@ -31,8 +31,8 @@ const MissionItem: React.FC<MissionItemProps> = ({
id,
name,
difficulty,
timeLimit,
memoryLimit,
timeLimit = 1000,
memoryLimit = 256 * 1024 * 1024,
type,
status,
}) => {
@@ -41,7 +41,7 @@ const MissionItem: React.FC<MissionItemProps> = ({
return (
<div
className={cn(
'h-[44px] w-full relative rounded-[10px] text-liquid-white',
'min-h-[44px] w-full relative rounded-[10px] text-liquid-white',
type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
'grid grid-cols-[80px,1fr,1fr,60px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
status == 'error' &&

1
src/views/home/missions/Missions.tsx
View File

@@ -3,7 +3,6 @@ import { SecondaryButton } from '../../../components/button/SecondaryButton';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { useEffect, useState } from 'react';
import { setMenuActivePage } from '../../../redux/slices/store';
import { useNavigate } from 'react-router-dom';
import { fetchMissions } from '../../../redux/slices/missions';
import ModalCreate from './ModalCreate';

15
src/views/home/missions/ModalCreate.tsx
View File

@@ -97,12 +97,15 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
<div className="mt-4">
<label className="block mb-2">Файл задачи</label>
<input
type="file"
onChange={handleFileChange}
accept=".zip"
required
/>
<label className="cursor-pointer inline-flex items-center justify-center px-4 py-2 bg-liquid-lighter hover:bg-liquid-dark transition-colors rounded-[10px] text-liquid-white font-medium shadow-md">
{file ? file.name : 'Выбрать файл'}
<input
type="file"
onChange={handleFileChange}
accept=".zip"
className="hidden"
/>
</label>
</div>
{/* Теги */}

0
src/views/mission/submission/Submission.tsx Normal file
View File