Добавлены хлебные крошки для навигации в компонентах и страницах, включая CourseList, LessonList, UserPage и Attendance. Обновлены локализации для новых элементов навигации. Реализован контекст для управления состоянием хлебных крошек через BreadcrumbsProvider и useBreadcrumbs. Обновлен компонент AppHeader для отображения хлебных крошек в зависимости от текущей страницы.

This commit is contained in:
2025-03-23 23:11:27 +03:00
parent 4e27e3d1c6
commit c92be3d7dd
12 changed files with 432 additions and 128 deletions

View File

@@ -0,0 +1,45 @@
import React, { createContext, useContext, useState, ReactNode } from 'react';
export type Breadcrumb = {
title: string;
path?: string;
isCurrentPage?: boolean;
};
type BreadcrumbsContextType = {
breadcrumbs: Breadcrumb[];
setBreadcrumbs: (breadcrumbs: Breadcrumb[]) => void;
};
const BreadcrumbsContext = createContext<BreadcrumbsContextType | undefined>(undefined);
export const BreadcrumbsProvider: React.FC<{children: ReactNode}> = ({ children }) => {
const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([]);
return (
<BreadcrumbsContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
{children}
</BreadcrumbsContext.Provider>
);
};
export const useBreadcrumbs = () => {
const context = useContext(BreadcrumbsContext);
if (context === undefined) {
throw new Error('useBreadcrumbs must be used within a BreadcrumbsProvider');
}
return context;
};
export const useSetBreadcrumbs = (newBreadcrumbs: Breadcrumb[]) => {
const { setBreadcrumbs } = useBreadcrumbs();
React.useEffect(() => {
setBreadcrumbs(newBreadcrumbs);
return () => {
// При размонтировании компонента очищаем хлебные крошки
setBreadcrumbs([]);
};
}, [setBreadcrumbs, JSON.stringify(newBreadcrumbs)]);
};