add components for statusbar and style

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -29,10 +29,17 @@ type WorkspaceTemplate = {
 const workspaceTemplates: WorkspaceTemplate[] = [
   {
     gsID: 'sUTLogo',
-    workspaceTitle: 'Playground',
+    workspaceTitle: 'Start Coding',
     description: 'Create a new project using this template.',
     projectLogo: 'assets/img/remixverticaltextLogo.png',
-    templateName: 'playground',
+    templateName: 'default',
+  },
+  {
+    gsID: 'sUTLogo',
+    workspaceTitle: 'All Templates',
+    description: 'View all templates.',
+    projectLogo: 'assets/img/remixverticaltextLogo.png',
+    templateName: 'default',
   },
   {
     gsID: 'sUTLogo',

libs/remix-ui/statusbar/src/css/statusbar.css

@@ -0,0 +1,4 @@
+
+remixui_statusbar :hover {
+  cursor: pointer;
+}

libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function AIStatus() {
+  return (
+    <div className="d-flex flex-row p-1 text-white justify-content-center align-items-center">
+      <span className="fa-regular fa-microchip-ai ml-1"></span>
+      <span className="small mx-1">Remix Copilot</span>
+    </div>
+  )
+}

libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx

@@ -3,8 +3,10 @@ import React from 'react'
 //use placeholder data to show the small section of the statusbar for git
 export default function GitStatus() {
   return (
-    <div className="d-flex flex-row">
-      <h6>Git Status</h6>
+    <div className="d-flex flex-row p-1 text-white justify-content-center align-items-center">
+      <span className="fa-regular fa-code-branch ml-1"></span>
+      <span className="small mx-1">dev-updates</span>
+      <span className="fa-solid fa-arrows-rotate fa-1"></span>
     </div>
   )
 }

libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { StatusBarInterface } from './types'
 import GitStatus from './components/gitStatus'
+import AIStatus from './components/aiStatus'
 
 export interface RemixUIStatusBarProps {
   statusBarPlugin: StatusBarInterface
@@ -14,8 +15,16 @@ export function RemixUIStatusBar ({ statusBarPlugin }: RemixUIStatusBarProps) {
     })
   }
   return (
-    <div className="d-flex flex-row bg-primary">
-      <GitStatus />
+    <div className="d-flex flex-row bg-primary justify-content-between align-items-center">
+      <div className="remixui_statusbar">
+        <GitStatus />
+      </div>
+      <div className="remixui_statusbar">
+
+      </div>
+      <div className="remixui_statusbar">
+        <AIStatus />
+      </div>
     </div>
   )
 }