66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-02-03 14:10:24
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-03-06 11:25:59
|
|
*/
|
|
import { type FC, type ReactNode } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Layout, Button } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
import logoutIcon from '@/assets/images/logout_hover.svg'
|
|
|
|
const { Header } = Layout;
|
|
|
|
/**
|
|
* Props for PageHeader component
|
|
*/
|
|
interface ConfigHeaderProps {
|
|
/** Page title/name */
|
|
name?: string | ReactNode;
|
|
/** Subtitle content displayed below the title */
|
|
subTitle?: ReactNode | string;
|
|
/** Extra content displayed on the right side */
|
|
extra?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Page header component for ontology pages
|
|
* Displays title, subtitle, back button and extra actions
|
|
* @param props - Component props
|
|
*/
|
|
const PageHeader: FC<ConfigHeaderProps> = ({
|
|
name,
|
|
subTitle,
|
|
extra
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
/**
|
|
* Navigate back to previous page
|
|
*/
|
|
const goBack = () => {
|
|
navigate(-1)
|
|
}
|
|
return (
|
|
<Header className="rb:w-full rb:h-16 rb:flex rb:justify-between rb:p-[0_16px_0_24px]! rb:border-b rb:border-[#EAECEE] rb:leading-8">
|
|
<div className="rb:flex rb:flex-col rb:justify-center rb:gap-1 rb:mr-4 rb:max-w-[calc(100%-300px)]">
|
|
<div className="rb:text-[16px] rb:leading-6 rb:font-medium">
|
|
{name}
|
|
</div>
|
|
<div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4">{subTitle}</div>
|
|
</div>
|
|
|
|
<div className="rb:flex rb:items-center rb:gap-3">
|
|
<Button type="primary" ghost className="rb:h-6! rb:px-2! rb:leading-5.5!" onClick={goBack}>
|
|
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/logout_hover.svg')]" />
|
|
{t('common.return')}
|
|
</Button>
|
|
{extra}
|
|
</div>
|
|
</Header>
|
|
);
|
|
};
|
|
|
|
export default PageHeader; |