docs: update for content

components/editor/live-editor.jsx

@@ -38,7 +38,7 @@ const extensions = [
       }
     ]
   }),
-  createQuickExtension(),
+  // createQuickExtension(),
   Color.configure({ types: [TextStyle.name, ListItem.name] }),
   // @ts-ignore
   TextStyle.configure({ types: [ListItem.name] }),
@@ -67,9 +67,17 @@ const LiveEditor = () => {
 
   return (
     <div>
-      {editor && <MenuBar editor={editor}/>}
-      <EditorContent editor={editor}/>
-      {editor && <MenuBubble editor={editor}/>}
+      <div className={'domain-buttons'}>
+        <button disabled={true} className={'domain-button'}>Blog</button>
+        <button disabled={true} className={'domain-button'}>Weekly Report</button>
+        <button disabled={true} className={'domain-button'}>Meeting Notes</button>
+        <button disabled={true} className={'domain-button'}>User Story</button>
+      </div>
+      <div className={'editor-section'}>
+        {editor && <MenuBar editor={editor}/>}
+        <EditorContent editor={editor}/>
+        {editor && <MenuBubble editor={editor}/>}
+      </div>
     </div>
   )
 }

pages/index.js

@@ -11,7 +11,7 @@ export default function Home() {
       </Head>
 
       <main>
-        <div className={styles.editor}>
+        <div>
           <LiveEditor />
         </div>
       </main>

styles/Home.module.css

@@ -57,16 +57,6 @@
     border-color 0.15s ease;
 }
 
-.editor {
-  margin: 1rem;
-  padding: 1rem;
-  flex-basis: 45%;
-  border: 1px solid #0070f3;
-  border-radius: 10px;
-  width: 600px;
-  height: 480px;
-}
-
 .card:hover,
 .card:focus,
 .card:active {

styles/global.css

@@ -227,4 +227,40 @@ input {
 
 .is-active {
     background-color: var(--violet-3);
+}
+
+.editor-section {
+    margin: 1rem;
+    padding: 1rem;
+    flex-basis: 45%;
+    border: 1px solid #0070f3;
+    border-radius: 10px;
+    width: 600px;
+    height: 480px;
+}
+
+.domain-buttons {
+    width: 600px;
+    margin: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.domain-button {
+    background-color: var(--violet-3);
+    color: var(--violet-11);
+    border-radius: 6px;
+    padding: 0.2rem 2rem;
+    margin-right: 0.2rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.domain-button:disabled {
+    background-color: var(--violet-4);
+    color: var(--violet-11);
+    cursor: not-allowed;
 }