shared component for views that have patterns and side menus

sites/shared/components/workbench/views/pattern-with-menu.mjs

@@ -0,0 +1,37 @@
+import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
+import { ViewHeader, ns as headerNs } from './view-header.mjs'
+import { MenuWrapper } from 'shared/components/workbench/menus/shared/menu-wrapper.mjs'
+
+export const ns = headerNs
+
+export const PatternWithMenu = ({
+  settings,
+  ui,
+  update,
+  control,
+  title,
+  pattern,
+  menu,
+  setSettings,
+}) => (
+  <PanZoomContextProvider>
+    <div className="flex flex-col h-full">
+      <ViewHeader
+        {...{
+          settings,
+          ui,
+          update,
+          control,
+          setSettings,
+        }}
+      />
+      <div className="flex flex-col lg:flex-row grow max-h-[90vh] lg:my-4">
+        <div className="lg:w-2/3 flex flex-col h-full grow px-4">
+          {title}
+          {pattern}
+        </div>
+        {menu && <MenuWrapper>{menu}</MenuWrapper>}
+      </div>
+    </div>
+  </PanZoomContextProvider>
+)