From ab084e0d5af2e1688cb1e2ca1c8cf8b16b99a1c1 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Wed, 9 Jun 2021 06:43:12 +1000
Subject: [PATCH] Add rough IdeHeader

relates to #360
---
 .../src/components/IdeConsole/IdeConsole.js   |  2 +-
 .../src/components/IdeHeader/IdeHeader.tsx    | 25 +++++++++++++
 app/web/src/pages/DevIdePage/DevIdePage.js    | 37 +++++++++----------
 3 files changed, 44 insertions(+), 20 deletions(-)
 create mode 100644 app/web/src/components/IdeHeader/IdeHeader.tsx

diff --git a/app/web/src/components/IdeConsole/IdeConsole.js b/app/web/src/components/IdeConsole/IdeConsole.js
index 5b8e581..12fefe1 100644
--- a/app/web/src/components/IdeConsole/IdeConsole.js
+++ b/app/web/src/components/IdeConsole/IdeConsole.js
@@ -20,7 +20,7 @@ const IdeConsole = () => {
             <pre
               className="font-mono text-sm"
               style={matchEditorVsDarkTheme.Text}
-              key={message + index}
+              key={`${message} ${index}`}
             >
               <div
                 className="text-xs font-bold pt-2"
diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx
new file mode 100644
index 0000000..ae144af
--- /dev/null
+++ b/app/web/src/components/IdeHeader/IdeHeader.tsx
@@ -0,0 +1,25 @@
+import Svg from 'src/components/Svg/Svg'
+
+const TopButton = ({children}) => (
+  <button className="flex bg-gray-500 h-10 justify-center items-center px-4 rounded">
+    <div className="rounded-full bg-gray-200 h-6 w-6 mr-4"/>
+    {children}
+  </button>
+)
+
+const IdeHeader = () => {
+  return (
+    <div className="h-16 bg-gray-900 flex justify-between items-center">
+      <div className="w-16 h-full flex items-center justify-center bg-gray-700">
+        <Svg className="w-12" name="favicon" />
+      </div>
+      <div className="text-gray-200 flex gap-4 mr-4">
+        <TopButton>Render</TopButton>
+        <TopButton>Share</TopButton>
+        <TopButton>Fork</TopButton>
+      </div>
+    </div>
+  )
+}
+
+export default IdeHeader
diff --git a/app/web/src/pages/DevIdePage/DevIdePage.js b/app/web/src/pages/DevIdePage/DevIdePage.js
index f648de1..b88a150 100644
--- a/app/web/src/pages/DevIdePage/DevIdePage.js
+++ b/app/web/src/pages/DevIdePage/DevIdePage.js
@@ -1,30 +1,29 @@
-import MainLayout from 'src/layouts/MainLayout'
 import Seo from 'src/components/Seo/Seo'
 import IdeToolbar from 'src/components/IdeToolbarNew'
 import OutBound from 'src/components/OutBound'
+import IdeHeader from 'src/components/IdeHeader'
 
 const DevIdePage = ({ cadPackage }) => {
   return (
     <div className="h-screen flex flex-col">
-      <MainLayout shouldRemoveFooterInIde>
-        <Seo
-          title="new ide in development"
-          description="new ide in development"
-          lang="en-US"
-        />
-        <div className="py-2 bg-pink-200">
-          <div className="mx-auto max-w-3xl">
-            We're still working on this. Since you're here, have a look what{' '}
-            <OutBound
-              className="text-pink-700"
-              to="https://github.com/Irev-Dev/cadhub/discussions/212"
-            >
-              we've got planned
-            </OutBound>
-            .
-          </div>
+      <Seo
+        title="new ide in development"
+        description="new ide in development"
+        lang="en-US"
+      />
+      <IdeHeader />
+      <div className="py-2 bg-pink-200">
+        <div className="mx-auto max-w-3xl">
+          We're still working on this. Since you're here, have a look what{' '}
+          <OutBound
+            className="text-pink-700"
+            to="https://github.com/Irev-Dev/cadhub/discussions/212"
+          >
+            we've got planned
+          </OutBound>
+          .
         </div>
-      </MainLayout>
+      </div>
       <div className="flex-auto">
         <IdeToolbar cadPackage={cadPackage} />
       </div>