Add rough IdeHeader

relates to #360

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"

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

app/web/src/pages/DevIdePage/DevIdePage.js

@@ -1,17 +1,17 @@
-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"
       />
+      <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{' '}
@@ -24,7 +24,6 @@ const DevIdePage = ({ cadPackage }) => {
           .
         </div>
       </div>
-      </MainLayout>
       <div className="flex-auto">
         <IdeToolbar cadPackage={cadPackage} />
       </div>