add filter

src/views/home/contests/Contests.tsx

@@ -6,6 +6,7 @@ import ContestsBlock from './ContestsBlock';
 import { setMenuActivePage } from '../../../redux/slices/store';
 import { fetchContests } from '../../../redux/slices/contests';
 import ModalCreateContest from './ModalCreate';
+import Filters from './Filter';
 
 const Contests = () => {
     const dispatch = useAppDispatch();
@@ -48,16 +49,24 @@ const Contests = () => {
                     />
                 </div>
 
-                <div className="bg-liquid-lighter h-[50px] mb-[20px]" />
-                {status == 'loading' && <div className="text-liquid-white p-4">Загрузка контестов...</div>}
-                {status == 'failed' && <div className="text-red-500 p-4">Ошибка: {error}</div>}
-                {status == 'successful' &&
+                <Filters />
+                {status == 'loading' && (
+                    <div className="text-liquid-white p-4">
+                        Загрузка контестов...
+                    </div>
+                )}
+                {status == 'failed' && (
+                    <div className="text-red-500 p-4">Ошибка: {error}</div>
+                )}
+                {status == 'successful' && (
                     <>
                         <ContestsBlock
                             className="mb-[20px]"
                             title="Текущие"
                             contests={contests.filter((contest) => {
-                                const endTime = new Date(contest.endsAt ?? new Date().toDateString()).getTime();
+                                const endTime = new Date(
+                                    contest.endsAt ?? new Date().toDateString(),
+                                ).getTime();
                                 return endTime >= now.getTime();
                             })}
                         />
@@ -66,12 +75,14 @@ const Contests = () => {
                             className="mb-[20px]"
                             title="Прошедшие"
                             contests={contests.filter((contest) => {
-                                const endTime = new Date(contest.endsAt ?? new Date().toDateString()).getTime();
+                                const endTime = new Date(
+                                    contest.endsAt ?? new Date().toDateString(),
+                                ).getTime();
                                 return endTime < now.getTime();
                             })}
                         />
                     </>
-                }
+                )}
             </div>
 
             <ModalCreateContest

src/views/home/contests/Filter.tsx

@@ -0,0 +1,51 @@
+import {
+    FilterDropDown,
+    FilterItem,
+} from '../../../components/drop-down-list/Filter';
+import { SorterDropDown } from '../../../components/drop-down-list/Sorter';
+import { SearchInput } from '../../../components/input/SearchInput';
+
+const Filters = () => {
+    const items: FilterItem[] = [
+        { text: 'React', value: 'react' },
+        { text: 'Vue', value: 'vue' },
+        { text: 'Angular', value: 'angular' },
+        { text: 'Svelte', value: 'svelte' },
+        { text: 'Next.js', value: 'next' },
+        { text: 'Nuxt', value: 'nuxt' },
+        { text: 'Solid', value: 'solid' },
+        { text: 'Qwik', value: 'qwik' },
+    ];
+
+    return (
+        <div className=" h-[50px] mb-[20px] flex gap-[20px] items-center">
+            <SearchInput onChange={() => {}} placeholder="Поиск задачи" />
+
+            <SorterDropDown
+                items={[
+                    {
+                        value: '1',
+                        text: 'Сложность',
+                    },
+                    {
+                        value: '2',
+                        text: 'Дата создания',
+                    },
+                    {
+                        value: '3',
+                        text: 'ID',
+                    },
+                ]}
+                onChange={(v) => console.log(v)}
+            />
+
+            <FilterDropDown
+                items={items}
+                defaultState={[]}
+                onChange={(values) => console.log(values)}
+            />
+        </div>
+    );
+};
+
+export default Filters;