70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
 
|
import React, { useState } from 'react';
|
||
|
|
import { BottomSheet } from './BottomSheet';
|
||
|
|
import { BlocksPanel } from '../left/BlocksPanel';
|
||
|
|
import { PagesPanel } from '../left/PagesPanel';
|
||
|
|
import { LayersPanel } from '../left/LayersPanel';
|
||
|
|
import { AssetsPanel } from '../left/AssetsPanel';
|
||
|
|
import { GuidedStyles } from '../right/GuidedStyles';
|
||
|
|
|
||
|
|
type MobileTab = 'blocks' | 'pages' | 'layers' | 'assets' | 'styles';
|
||
|
|
|
||
|
|
const TABS: { id: MobileTab; label: string; icon: string }[] = [
|
||
|
|
{ id: 'blocks', label: 'Blocks', icon: 'fa-cube' },
|
||
|
|
{ id: 'pages', label: 'Pages', icon: 'fa-file-o' },
|
||
|
|
{ id: 'layers', label: 'Layers', icon: 'fa-sitemap' },
|
||
|
|
{ id: 'assets', label: 'Assets', icon: 'fa-image' },
|
||
|
|
{ id: 'styles', label: 'Styles', icon: 'fa-paint-brush' },
|
||
|
|
];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile replacement for the desktop LeftPanel/RightPanel column layout
|
||
|
|
* (Phase A). A fixed bottom tab bar (Blocks/Pages/Layers/Assets/Styles)
|
||
|
|
* toggles a single `BottomSheet` at a time, hosting the SAME panel
|
||
|
|
* component the desktop side panels use -- unchanged, so behavior/state
|
||
|
|
* stays identical, only the chrome around it differs. Tapping the active
|
||
|
|
* tab again, tapping the backdrop, the sheet's close button, or Escape all
|
||
|
|
* close the open sheet.
|
||
|
|
*
|
||
|
|
* "Styles" hosts `GuidedStyles`, which already falls back to the
|
||
|
|
* site-design panel when nothing is selected and switches to the
|
||
|
|
* per-type style panel once something is -- this is the natural place to
|
||
|
|
* edit a tapped element's styling (Phase B deepens the tap-to-select flow;
|
||
|
|
* this component only wires up the sheet, per the Phase A brief).
|
||
|
|
*/
|
||
|
|
export const MobilePanelBar: React.FC = () => {
|
||
|
|
const [activeTab, setActiveTab] = useState<MobileTab | null>(null);
|
||
|
|
|
||
|
|
const handleTabClick = (tab: MobileTab) => {
|
||
|
|
setActiveTab((current) => (current === tab ? null : tab));
|
||
|
|
};
|
||
|
|
|
||
|
|
const activeLabel = TABS.find((t) => t.id === activeTab)?.label ?? '';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<BottomSheet open={activeTab !== null} onClose={() => setActiveTab(null)} title={activeLabel}>
|
||
|
|
{activeTab === 'blocks' && <BlocksPanel />}
|
||
|
|
{activeTab === 'pages' && <PagesPanel />}
|
||
|
|
{activeTab === 'layers' && <LayersPanel />}
|
||
|
|
{activeTab === 'assets' && <AssetsPanel />}
|
||
|
|
{activeTab === 'styles' && <GuidedStyles />}
|
||
|
|
</BottomSheet>
|
||
|
|
|
||
|
|
<nav className="mobile-tab-bar" aria-label="Editor panels">
|
||
|
|
{TABS.map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab.id}
|
||
|
|
type="button"
|
||
|
|
className={`mobile-tab-btn${activeTab === tab.id ? ' active' : ''}`}
|
||
|
|
onClick={() => handleTabClick(tab.id)}
|
||
|
|
aria-pressed={activeTab === tab.id}
|
||
|
|
>
|
||
|
|
<i className={`fa ${tab.icon}`} aria-hidden="true" />
|
||
|
|
<span>{tab.label}</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|