/
pras
/
Course-Catalog
Обзор
Документация
Войти
/
pras
/
Course-Catalog
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/App.jsx
70 строк
2 KB
Кирилл
first commit
02 июл 2026, 16:24
02 июл 2026, 16:24
85b3dcb
Код
Авторство
О чём код?
import { useState } from 'react' import './App.css' import CourseList from './components/CourseList'; import CourseFilters from './components/CourseFilters'; import { courses } from './data/courses'; function App() { const [query, setQuery] = useState(''); const [levelFilter, setLevelFilter] = useState('all'); const [sortMode, setSortMode] = useState('default'); const normalizedQuery = query.trim().toLowerCase(); const filteredCourses = courses.filter((course) => { const matchesQuery = course.title.toLowerCase().includes(normalizedQuery) || course.category.toLowerCase().includes(normalizedQuery) || course.description.toLowerCase().includes(normalizedQuery); const matchesLevel = levelFilter === 'all' || course.level === levelFilter; return matchesQuery && matchesLevel; }); const visibleCourses = [...filteredCourses].sort((a, b) => { switch (sortMode) { case 'title': return a.title.localeCompare(b.title); case 'price-asc': return a.price - b.price; case 'price-desc': return b.price - a.price; case 'rating': return b.rating - a.rating; default: return 0; } }); const handleReset = () => { setQuery(''); setLevelFilter('all'); setSortMode('default'); }; return ( <div className="catalog"> <header className="catalog-header"> <h1>📚 Каталог курсов</h1> </header> <CourseFilters query={query} onQueryChange={setQuery} levelFilter={levelFilter} onLevelChange={setLevelFilter} sortMode={sortMode} onSortChange={setSortMode} onReset={handleReset} /> <CourseList courses={visibleCourses} totalCount={courses.length} /> </div> ); } export default App