add filter

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]"