chore: getting ready for device controll container

henrynoowah · Feb 10, 2025 · cc44b28 · cc44b28
1 parent 913c77e
commit cc44b28
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/apps/docs/data/test-data.ts b/apps/docs/data/test-data.ts
@@ -14,7 +14,7 @@ export const data: Page = {
   },
   style: {
     width: "100%",
-    maxWidth: "100%",
+    maxWidth: "1920px",
     display: "flex",
     flexDirection: "column",
     gap: "24px",

diff --git a/packages/ui/src/components/editor/Editor.tsx b/packages/ui/src/components/editor/Editor.tsx
@@ -211,8 +211,18 @@ Editor_.displayName = "Editor";
 export default Editor;
 
 const EditorContextMenu = ({ children }: { children: React.ReactNode }) => {
-  const { insertSection, addBlock, updateSelectedSection, selectedSectionRef } =
-    useEditorContext();
+  const {
+    insertSection,
+    addBlock,
+    updateSelectedSection,
+    selectedSectionRef,
+    themes,
+  } = useEditorContext();
+
+  const {
+    colors: { highlight },
+  } = themes;
+
   return (
     <ContextMenu
       items={[
@@ -395,7 +405,7 @@ const EditorContextMenu = ({ children }: { children: React.ReactNode }) => {
                       style: {
                         width: "50%",
                         height: "50%",
-                        backgroundColor: "white",
+                        backgroundColor: highlight,
                         borderRadius: "12px",
                         display: "flex",
                         justifyContent: "center",
@@ -430,8 +440,9 @@ const EditorContextMenu = ({ children }: { children: React.ReactNode }) => {
                     content: `<h1>New Block ${nextIndex}</h1>`,
                     style: {
                       padding: "24px",
-                      backgroundColor: "red",
+                      backgroundColor: highlight,
                       zIndex: nextIndex,
+                      borderRadius: "12px",
                     },
                     order: nextIndex,
                   };

diff --git a/packages/ui/src/components/editor/EditorContext.tsx b/packages/ui/src/components/editor/EditorContext.tsx
@@ -32,7 +32,7 @@ export const EditorContext = ({
   view = "web",
   containerName = "content-container",
   data,
-  children
+  children,
 }: EditorContextProps) => {
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
 
@@ -84,9 +84,9 @@ export const EditorContext = ({
         containerName,
         themes: {
           colors: {
-            highlight: COLORS.highlight
-          }
-        }
+            highlight: COLORS.highlight,
+          },
+        },
       }}
     >
       <EditorContainer data={data} view={view} containerName={containerName}>
@@ -113,13 +113,30 @@ const EditorContainer = ({
   return (
     <div
       style={{
-        ...data?.style,
-        containerName,
         width: "100%",
-        maxWidth: view === "web" ? undefined : "768px",
+        maxWidth: view === "web" ? "1920px" : "768px",
+        margin: "0 auto",
+        position: "relative",
       }}
     >
-      {children}
+      <div className="nwcb-flex nwcb-justify-between nwcb-items-center nwcb-w-full nwcb-h-12 nwcb-bg-white nwcb-p-4">
+        <div className="nwcb-flex nwcb-gap-2">
+          <button className="nwcb-w-8 nwcb-h-8 nwcb-bg-gray-200 nwcb-rounded-full nwcb-flex nwcb-justify-center nwcb-items-center">
+            {"<-"}
+          </button>
+          <button className="nwcb-w-8 nwcb-h-8 nwcb-bg-gray-200 nwcb-rounded-full nwcb-flex nwcb-justify-center nwcb-items-center">
+            {"->"}
+          </button>
+        </div>
+      </div>
+      <div
+        style={{
+          ...data?.style,
+          containerName,
+        }}
+      >
+        {children}
+      </div>
     </div>
   );
 };