add filter

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;