/
lizardking
/
react_project
Обзор
Документация
Войти
/
lizardking
/
react_project
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/features/taskList/ui/TaskList.tsx
52 строки
2 KB
LizardKing
Task 5 - useRef
17 окт 2025, 03:34
17 окт 2025, 03:34
e989e42
Код
Авторство
О чём код?
import { TaskCard } from 'entities/task' import { FilterButton } from 'shared/ui/FilterButton' import { Section } from 'shared/ui/Section' import type { Filter } from '../model/useTasks' import { useTasks } from '../model/useTasks' export function TaskList() { const { tasks, filter, handleSetFilter, isLoading, isError, removeTask } = useTasks() const FilterControls = () => ( <div className="flex flex-wrap gap-2 mb-6"> {(['all', 'completed', 'incomplete'] as Filter[]).map((filterValue) => ( <FilterButton key={filterValue} active={filter === filterValue} onClick={handleSetFilter(filterValue)} aria-pressed={filter === filterValue} > {filterValue === 'all' && 'Все'} {filterValue === 'completed' && 'Завершённые'} {filterValue === 'incomplete' && 'Незавершённые'} </FilterButton> ))} </div> ) if (isLoading) return ( <div className="text-muted text-center py-8 text-sm">Загружаем задачи…</div> ) if (isError) return ( <div className="text-rose-400 text-center py-8 text-sm"> Ошибка загрузки. Попробуйте обновить страницу. </div> ) return ( <Section actions={<FilterControls />}> {tasks.length === 0 && ( <div className="text-muted text-center py-6">Ничего не нашлось</div> )} <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> {tasks.map((task) => ( <TaskCard key={task.id} task={task} onRemove={removeTask} /> ))} </div> </Section> ) }