top bar

src/ui/App.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-function buttonFunctionality() {
-  alert('Button clicked!');
-}
+// Major Components
+import Topbar from './components/TopBar'
 
 function App() {
   return (
     <div className="App">
-      <button onClick={buttonFunctionality}>Cool button</button>
+      <Topbar />
+      <button onClick={() => console.log("cum")}>Cool button</button>
     </div>
   );
 }

src/ui/components/TopBar.css

@@ -0,0 +1,10 @@
+.TopBar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 34px;
+  background-color: #141414;
+  z-index: 1;
+  color: #fff;
+}

src/ui/components/TopBar.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './TopBar.css';
+
+export default class TopBar extends React.Component {
+  constructor(props: unknown[]) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="TopBar">
+        TOP BAR BABY
+      </div>
+    )
+  }
+}