### What problem does this PR solve? Feat: Adjust the page header to breadcrumbs #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { PageHeader } from '@/components/page-header';
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@/components/ui/breadcrumb';
|
|
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
|
import { House } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Outlet } from 'umi';
|
|
import { SideBar } from './sidebar';
|
|
|
|
export default function ProfileSetting() {
|
|
const { navigateToHome } = useNavigatePage();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="flex flex-col w-full h-screen bg-background text-foreground">
|
|
<PageHeader>
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink onClick={navigateToHome}>
|
|
<House className="size-4" />
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>{t('setting.profile')}</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</PageHeader>
|
|
|
|
<div className="flex flex-1 bg-muted/50">
|
|
<SideBar></SideBar>
|
|
|
|
<main className="flex-1 ">
|
|
<Outlet></Outlet>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|