Магазин товаров

Этот проект представляет собой простое веб-приложение для отображения списка товаров и их деталей. Приложение разработано с использованием React и Material-UI.

Описание

Приложение состоит из двух основных страниц:

1. Список товаров: Отображает список всех доступных товаров с возможностью поиска по названию.
2. Детали товара: Отображает подробную информацию о выбранном товаре.

Структура проекта

Проект организован следующим образом:

    src/
    ├── components/
    │   ├── ProductCard.tsx
    │   ├── ProductListItem.tsx
    │   ├── ProductList.tsx
    │   ├── SearchBar.tsx
    │   └── types.ts
    ├── data/
    │   └── products.ts
    ├── hooks/
    │   └── useProductDetails.ts
    ├── pages/
    │   ├── ProductDetails.tsx
    │   └── ProductListPage.tsx
    ├── App.tsx
    └── index.tsx

Описание компонентов

1. ProductCard.tsx

Описание: Компонент для отображения деталей товара. Используется на странице с деталями товара.

Пропсы:

• product: Объект товара.

• onGoBack: Функция для обработки события "назад".

2. ProductListItem.tsx

Описание:

Компонент для отображения товара в списке. Используется на странице со списком товаров.

Пропсы:

• product: Объект товара.

3. ProductList.tsx

Описание:

Компонент для отображения списка товаров. Включает поисковую строку и список товаров.

4. SearchBar.tsx

Описание:

Компонент для поиска товаров по названию.

Пропсы:

• onSearch: Функция, вызываемая при изменении поискового запроса.

5. types.ts

Описание:

Файл для определения типов данных, используемых в приложении.

Хук useProductDetails.ts

Описание:

Хук для получения деталей товара и обработки навигации назад.

Возвращаемое значение:

• id: Идентификатор товара.

• product: Объект товара.

• handleGoBack: Функция для обработки события "назад".

Описание страниц

1. ProductDetails.tsx

Страница для отображения деталей выбранного товара. Использует хук useProductDetails для получения данных о товаре и обработки навигации назад.

2. ProductListPage.tsx

Страница для отображения списка товаров. Использует компонент ProductList для отображения товаров.

Описание данных

products.ts

Файл с данными о товарах. Используется для хранения и предоставления данных о товарах в приложении.