build: 55712324-398e-4334-a254-fc30c84b2e47

2026-05-28 14:21:39 +00:00
commit 1578329fc6
107 changed files with 11111 additions and 0 deletions
@@ -0,0 +1,69 @@
+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;