В этом задании мы разобьём приложение фильтрации товаров на независимые компоненты.
Фильтрация данных - это частая задача в интерфейсах каталогов, таблиц, списков. Пользователь может искать по тексту, выбирать категорию, фильтровать по наличию. Все эти элементы управления можно выделить в отдельные компоненты.
В нашем приложении фильтрации можно выделить несколько частей:
Панель фильтров - контейнер со всеми элементами управления фильтрацией
Поле поиска - текстовый инпут для поиска по названию
Селектор категории - выпадающий список категорий
Чекбокс наличия - переключатель "Только в наличии"
- контейнер с карточками товаров
Сетка товаров
Карточка товара - отдельная карточка с информацией о товаре
Бейдж статуса - индикатор наличия товара
Вычисляемые значения - фильтрация товаров это вычисление на основе состояния. Отфильтрованный массив не нужно хранить в состоянии, он вычисляется при каждом рендере на основе products и параметров фильтрации.
Контролируемые фильтры - все элементы фильтрации (поиск, селект, чекбокс) должны быть контролируемыми компонентами, получающими значения и обработчики через props.
Задание
Необходимо разбить приложение фильтрации товаров на независимые компоненты. Создайте компонент SearchInput, который принимает value (текст поиска) и onChange (обработчик изменения), и отображает поле поиска. Создайте компонент CategorySelect, который принимает value (выбранная категория), onChange (обработчик изменения) и categories (массив доступных категорий), и отображает выпадающий список. Создайте компонент StockCheckbox, который принимает checked (состояние чекбокса) и onChange (обработчик изменения), и отображает чекбокс "Только в наличии". Создайте компонент FilterPanel, который объединяет SearchInput, CategorySelect и StockCheckbox, получая все необходимые props. Создайте компонент StockBadge, который принимает inStock (наличие товара) и отображает цветную метку. Создайте компонент ProductCard, который принимает product (объект товара) и отображает карточку с использованием StockBadge. Создайте компонент ProductGrid, который принимает products (массив товаров) и отображает сетку из ProductCard. В компоненте App оставьте состояние (products, search, category, inStockOnly), логику фильтрации и композицию FilterPanel и ProductGrid.
