add filter

src/views/home/account/missions/MyMissionItem.tsx

@@ -1,5 +1,4 @@
 import { cn } from '../../../../lib/cn';
-import { IconError, IconSuccess } from '../../../../assets/icons/missions';
 import { useNavigate } from 'react-router-dom';
 import { Edit } from '../../../../assets/icons/input';
 

src/views/home/articles/Articles.tsx

@@ -5,6 +5,7 @@ import ArticleItem from './ArticleItem';
 import { setMenuActivePage } from '../../../redux/slices/store';
 import { useNavigate } from 'react-router-dom';
 import { fetchArticles } from '../../../redux/slices/articles';
+import Filters from './Filter';
 
 export interface Article {
     id: number;
@@ -42,7 +43,7 @@ const Articles = () => {
                     />
                 </div>
 
-                <div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
+                <Filters />
 
                 <div>
                     {articles.map((v, i) => (

src/views/home/articles/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;

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;

src/views/home/groups/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;

src/views/home/groups/Groups.tsx

@@ -7,6 +7,7 @@ import { setMenuActivePage } from '../../../redux/slices/store';
 import { fetchMyGroups } from '../../../redux/slices/groups';
 import ModalCreate from './ModalCreate';
 import ModalUpdate from './ModalUpdate';
+import Filters from './Filter';
 
 export interface GroupUpdate {
     id: number;
@@ -86,7 +87,7 @@ const Groups = () => {
                     />
                 </div>
 
-                <div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
+                <Filters />
 
                 <GroupsBlock
                     className="mb-[20px]"

src/views/home/missions/Filter.tsx

@@ -1,5 +1,9 @@
-import { Filter, FilterItem } from '../../../components/drop-down-list/Filter';
-import { Sorter } from '../../../components/drop-down-list/Sorter';
+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[] = [
@@ -14,10 +18,10 @@ const Filters = () => {
     ];
 
     return (
-        <div className=" h-[50px] mb-[20px] flex gap-[20px]">
-            <div></div>
+        <div className=" h-[50px] mb-[20px] flex gap-[20px] items-center">
+            <SearchInput onChange={() => {}} placeholder="Поиск задачи" />
 
-            <Sorter
+            <SorterDropDown
                 items={[
                     {
                         value: '1',
@@ -35,7 +39,7 @@ const Filters = () => {
                 onChange={(v) => console.log(v)}
             />
 
-            <Filter
+            <FilterDropDown
                 items={items}
                 defaultState={[]}
                 onChange={(values) => console.log(values)}