47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
|
||
|
|
|
||
|
|
type MobileChromeState = {
|
||
|
|
title: string | null;
|
||
|
|
primaryAction: ReactNode | null;
|
||
|
|
showBackButton: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
type MobileChromeApi = MobileChromeState & {
|
||
|
|
setChrome: (next: Partial<MobileChromeState>) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const MobileChromeContext = createContext<MobileChromeApi | null>(null);
|
||
|
|
|
||
|
|
export function MobileLayoutProvider({ children }: { children: ReactNode }) {
|
||
|
|
const [state, setState] = useState<MobileChromeState>({
|
||
|
|
title: null,
|
||
|
|
primaryAction: null,
|
||
|
|
showBackButton: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const value = useMemo<MobileChromeApi>(
|
||
|
|
() => ({
|
||
|
|
...state,
|
||
|
|
setChrome: (next) => setState((prev) => ({ ...prev, ...next })),
|
||
|
|
}),
|
||
|
|
[state],
|
||
|
|
);
|
||
|
|
|
||
|
|
return <MobileChromeContext.Provider value={value}>{children}</MobileChromeContext.Provider>;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Page-level hook to push a title / back-button / primary action into the
|
||
|
|
* mobile topbar. The provider is only mounted by `<MobileLayout>`, so
|
||
|
|
* desktop-shell renders never call into this context.
|
||
|
|
*/
|
||
|
|
export function useMobileChrome() {
|
||
|
|
const ctx = useContext(MobileChromeContext);
|
||
|
|
if (!ctx) {
|
||
|
|
throw new Error('useMobileChrome must be used inside <MobileLayoutProvider>');
|
||
|
|
}
|
||
|
|
return ctx;
|
||
|
|
}
|