Front/src/features/MainLayoutTasks/ui/MainLayoutTasks.tsx - master - Rics/JobReady

Front/src/features/MainLayoutTasks/ui/MainLayoutTasks.tsx
84 строки4 KB
Rics
add app
16 сен 2025, 16:56
16 сен 2025, 16:5675981cd
import styles from './mainLayout.module.scss';
import {Dropdown} from "@shared/components";
import {Sidebar, TaskList} from "@/widgets";
import searchIcon from '@shared/assets/icons/searchIcon.png';
import forYou from '@shared/assets/icons/forYou.png';
import {allTasks} from "@/data/allTasks.ts";
import {useState} from "react";

export const MainLayoutTasks = () => {

    const [search, setSearch] = useState('');
    const [openDropdown, setOpenDropdown] = useState<string | null>(null);

    const handleToggleDropdown = (name: string) => {
        setOpenDropdown((prev) => (prev === name ? null : name));
    };

    const filteredTasks = allTasks.filter(task =>
        task.title.toLowerCase().includes(search.toLowerCase())
    );

    return (
        <div className={styles.layout}>
            <div className={styles.content}>
                <div className={styles.leftBlock}>

                    <div className={styles.mainColumn}>
                        <div className={styles.searchSort}>
                            <div className={styles.inputWrapper}>
                                <input
                                    type="text"
                                    placeholder="Поиск по названию задачи"
                                    className={styles.input}
                                    value={search}
                                    onChange={(e) => setSearch(e.target.value)}
                                />
                                <img src={searchIcon} alt="Поиск" className={styles.icon} />
                            </div>
                            <Dropdown
                                label="Сортировка"
                                options={["Сначала лёгкие", "Сначала сложные", "Сначала новые", "Сначала старые"]}
                                isOpen={openDropdown === "sort"}
                                onToggle={() => handleToggleDropdown("sort")}
                            />
                        </div>

                        <div className={styles.filtersRow}>
                            <Dropdown
                                label="Направление"
                                options={["Алгоритмы", "Аналитика данных", "Бекенд", "Мобильная разработка", "Фронтенд"]}
                                isOpen={openDropdown === "track"}
                                onToggle={() => handleToggleDropdown("track")}
                            />
                            <Dropdown
                                label="Язык"
                                options={["С#", "JAVA", "JavaScript"]}
                                isOpen={openDropdown === "language"}
                                onToggle={() => handleToggleDropdown("language")}
                            />
                            <Dropdown
                                label="Сложность"
                                options={["Легкая", "Средняя", "Сложная"]}
                                isOpen={openDropdown === "level"}
                                onToggle={() => handleToggleDropdown("level")}
                            />
                            <button className={styles.userBtn}>
                                <span className={styles.label}>Для тебя</span>
                                <img src={forYou} alt="Пользователь" className={styles.userIcon} />
                            </button>
                        </div>

                        <div className={styles.tasksWrapper}>
                            <TaskList tasks={filteredTasks} />
                        </div>

                    </div>

                </div>

                <Sidebar />
            </div>
        </div>
    );
};