# Страницы

Эта директория содержит компоненты страниц приложения. Каждая страница представляет собой отдельный маршрут в приложении.

## Структура

```
pages/
├── HomePage.jsx              # Главная страница
├── MediaPage.jsx            # Страница медиа
├── ProfilePage.jsx          # Страница профиля
├── ReviewsPage.jsx          # Страница рецензий
├── SearchPage.jsx           # Страница поиска
├── SettingsPage.jsx         # Страница настроек
└── admin/                   # Административные страницы
    ├── DashboardPage.jsx    # Панель управления
    ├── MediaPage.jsx        # Управление медиа
    ├── UsersPage.jsx        # Управление пользователями
    └── ReviewsPage.jsx      # Управление рецензиями
```

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

### HomePage
Главная страница приложения:
- Отображает популярный контент
- Показывает последние рецензии
- Предоставляет быстрый доступ к основным функциям
- Включает статистику платформы

### MediaPage
Страница с информацией о медиа:
- Детальная информация о медиа
- Список рецензий
- Возможность оставить рецензию
- Похожие медиа

### ProfilePage
Страница профиля пользователя:
- Информация о пользователе
- История рецензий
- Достижения
- Настройки профиля

### ReviewsPage
Страница с рецензиями:
- Список рецензий
- Фильтрация и сортировка
- Возможность создания рецензии
- Лайки и комментарии

### SearchPage
Страница поиска:
- Поиск по медиа
- Фильтры и категории
- Результаты поиска
- Быстрый доступ к найденному

### SettingsPage
Страница настроек:
- Настройки профиля
- Настройки приложения
- Уведомления
- Безопасность

### admin/
Административные страницы:
- DashboardPage: Общая статистика и управление
- MediaPage: Управление медиаконтентом
- UsersPage: Управление пользователями
- ReviewsPage: Модерация рецензий

## Использование

1. Импортируйте страницу в маршрутизатор:
```javascript
import HomePage from '../pages/HomePage';
```

2. Добавьте маршрут:
```javascript
<Route path="/" element={<HomePage />} />
```

## Лучшие практики

1. Разделяйте логику и представление
2. Используйте контексты для глобального состояния
3. Реализуйте ленивую загрузку для больших страниц
4. Обрабатывайте состояния загрузки и ошибок
5. Оптимизируйте производительность
6. Следуйте принципам доступности

## Пример структуры страницы

```javascript
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { getMediaById } from '../services/pocketbaseService';

const MediaPage = () => {
  const { id } = useParams();
  const { user } = useAuth();
  const [media, setMedia] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMedia = async () => {
      try {
        const data = await getMediaById(id);
        setMedia(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchMedia();
  }, [id]);

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;
  if (!media) return <NotFound />;

  return (
    <div className="container mx-auto px-4 py-8">
      <MediaHeader media={media} />
      <MediaContent media={media} />
      <ReviewsSection mediaId={media.id} />
    </div>
  );
};

export default MediaPage;
```