39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { useMemo, useCallback } from 'react';
|
|
import type { LayoutNode, PanelComponents } from 'officerdev';
|
|
import { WorkspaceView } from 'officerdev';
|
|
import { useWorkspacesState } from 'state/useWorkspacesState';
|
|
import { useIsMobile } from 'hooks/useIsMobile';
|
|
import { useGlobal } from 'hooks/useGlobal';
|
|
import { defaultLayout } from './defaultLayout';
|
|
import { TabList } from './TabList';
|
|
import { TabPreview } from './TabPreview';
|
|
|
|
export const BrowserScreen = () => {
|
|
const isMobile = useIsMobile();
|
|
const [selectedId, setSelectedId] = useGlobal<string | null>('BROWSER_SELECTED_TAB', null);
|
|
const workspace = useWorkspacesState<LayoutNode>('screens/browser', defaultLayout);
|
|
|
|
const components: PanelComponents = useMemo(
|
|
() => ({
|
|
'browser-tabs': TabList,
|
|
'browser-preview': TabPreview,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const mobilePanelId = isMobile && selectedId ? 'browser-preview' : undefined;
|
|
const onMobileBack = useCallback(() => setSelectedId(null), [setSelectedId]);
|
|
|
|
return (
|
|
<div className="h-full w-full pt-2">
|
|
<WorkspaceView
|
|
workspace={workspace}
|
|
locked
|
|
components={components}
|
|
mobilePanelId={mobilePanelId}
|
|
onMobilePanelChange={mobilePanelId ? () => onMobileBack() : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|