AppCakes
70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
IonHeader,
|
|
IonToolbar,
|
|
IonTitle,
|
|
IonButtons,
|
|
IonBackButton,
|
|
useIonViewWillEnter,
|
|
} from '@ionic/react';
|
|
import { setStatusBarStyle, Style } from '../utils/statusBar';
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
showBackButton?: boolean;
|
|
defaultBackHref?: string;
|
|
endActions?: React.ReactNode;
|
|
style?: React.CSSProperties;
|
|
toolbarStyle?: React.CSSProperties;
|
|
}
|
|
|
|
export const PageHeader: React.FC<PageHeaderProps> = ({
|
|
title,
|
|
showBackButton = false,
|
|
defaultBackHref = '/home',
|
|
endActions,
|
|
style,
|
|
toolbarStyle,
|
|
}) => {
|
|
// Use Ionic lifecycle hook to set status bar style automatically for pages using PageHeader
|
|
useIonViewWillEnter(() => {
|
|
setStatusBarStyle(Style.Dark); // Dark text/icons for light-colored headers
|
|
});
|
|
|
|
return (
|
|
<IonHeader className="ion-no-border" style={style}>
|
|
<IonToolbar
|
|
style={
|
|
{
|
|
'--background': '#ffffff',
|
|
'--color': 'var(--ion-color-dark)',
|
|
'--border-width': '0 0 1px 0',
|
|
'--border-color': 'rgba(0, 0, 0, 0.05)',
|
|
...toolbarStyle,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
{showBackButton && (
|
|
<IonButtons slot="start">
|
|
<IonBackButton defaultHref={defaultBackHref} />
|
|
</IonButtons>
|
|
)}
|
|
|
|
<IonTitle
|
|
style={{
|
|
fontWeight: '800',
|
|
fontSize: '1.1rem',
|
|
letterSpacing: '-0.3px',
|
|
}}
|
|
>
|
|
{title}
|
|
</IonTitle>
|
|
|
|
{endActions && <IonButtons slot="end">{endActions}</IonButtons>}
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
);
|
|
};
|
|
|
|
export default PageHeader;
|