From 22b8f3a88a42eeceb37ec336b5fa0330f36a599b Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 10 May 2024 13:22:58 +0200
Subject: [PATCH] add components for statusbar and style

---
 .../src/lib/components/homeTabGetStarted.tsx        | 11 +++++++++--
 libs/remix-ui/statusbar/src/css/statusbar.css       |  4 ++++
 .../statusbar/src/lib/components/aiStatus.tsx       | 10 ++++++++++
 .../statusbar/src/lib/components/gitStatus.tsx      |  6 ++++--
 .../statusbar/src/lib/remixui-statusbar-panel.tsx   | 13 +++++++++++--
 5 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 libs/remix-ui/statusbar/src/css/statusbar.css
 create mode 100644 libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx

diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
index 8b55a27afa..eb7674ebb6 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
+++ b/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',
diff --git a/libs/remix-ui/statusbar/src/css/statusbar.css b/libs/remix-ui/statusbar/src/css/statusbar.css
new file mode 100644
index 0000000000..d0ed6c3579
--- /dev/null
+++ b/libs/remix-ui/statusbar/src/css/statusbar.css
@@ -0,0 +1,4 @@
+
+remixui_statusbar :hover {
+  cursor: pointer;
+}
diff --git a/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx b/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx
new file mode 100644
index 0000000000..e227869d70
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx b/libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx
index 84bb47f092..8fba5add56 100644
--- a/libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx
+++ b/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>
   )
 }
diff --git a/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx b/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
index cba0915229..a013f57330 100644
--- a/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
+++ b/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>
   )
 }