missions and filter

src/views/home/missions/Filter.tsx

@@ -0,0 +1,48 @@
+import { Filter, FilterItem } from '../../../components/drop-down-list/Filter';
+import { Sorter } from '../../../components/drop-down-list/Sorter';
+
+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">
+            <div></div>
+
+            <Sorter
+                items={[
+                    {
+                        value: '1',
+                        text: 'Сложность',
+                    },
+                    {
+                        value: '2',
+                        text: 'Дата создания',
+                    },
+                    {
+                        value: '3',
+                        text: 'ID',
+                    },
+                ]}
+                onChange={(v) => console.log(v)}
+            />
+
+            {/* <Filter
+                items={items}
+                defaultState={[items[0], items[3]]} // начальные выбранные элементы
+                onChange={(values) => console.log(values)} // обработчик изменения
+                className="w-[240px]"
+            /> */}
+        </div>
+    );
+};
+
+export default Filters;

src/views/home/missions/Missions.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { setMenuActivePage } from '../../../redux/slices/store';
 import { fetchMissions } from '../../../redux/slices/missions';
 import ModalCreate from './ModalCreate';
+import Filters from './Filter';
 
 export interface Mission {
     id: number;
@@ -45,7 +46,7 @@ const Missions = () => {
                     />
                 </div>
 
-                <div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
+                <Filters />
 
                 <div>
                     {missions.map((v, i) => (