feat: add reusable MobileScreenHeader component

Extracts the back-button header pattern used across all mobile screens into a single component. Props: title (string), rightActions (ReactNode).
2026-03-23 14:15:04 +01:00
parent d8c5e7ff16
commit 7c40a230bc
1 changed files with 26 additions and 0 deletions
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useUIStore } from '../../stores/uiStore';
+
+interface MobileScreenHeaderProps {
+  title: string;
+  rightActions?: React.ReactNode;
+}
+
+export function MobileScreenHeader({ title, rightActions }: MobileScreenHeaderProps) {
+  const popMobileScreen = useUIStore((s) => s.popMobileScreen);
+
+  return (
+    <header className="h-12 flex items-center gap-2 px-3 border-b border-border-soft bg-surface-base shrink-0">
+      <button
+        onClick={popMobileScreen}
+        className="w-8 h-8 flex items-center justify-center text-txt-secondary hover:text-txt-primary"
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+        </svg>
+      </button>
+      <h1 className="text-sm font-semibold text-txt-primary flex-1 truncate">{title}</h1>
+      {rightActions}
+    </header>
+  );
+}