From 31684227e1789a76b447db460b06835b3b7272ee Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Sun, 8 May 2022 16:39:26 -0700 Subject: [PATCH] top bar --- public/index.html | 25 +------------------------ src/ui/App.tsx | 8 ++++---- src/ui/components/TopBar.css | 10 ++++++++++ src/ui/components/TopBar.tsx | 16 ++++++++++++++++ 4 files changed, 31 insertions(+), 28 deletions(-) create mode 100644 src/ui/components/TopBar.css create mode 100644 src/ui/components/TopBar.tsx diff --git a/public/index.html b/public/index.html index aa069f2..a31d734 100644 --- a/public/index.html +++ b/public/index.html @@ -7,37 +7,14 @@ - - React App
- diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 7dcd20d..eca912c 100644 --- a/src/ui/App.tsx +++ b/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 (
- + +
); } diff --git a/src/ui/components/TopBar.css b/src/ui/components/TopBar.css new file mode 100644 index 0000000..a7a5131 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/ui/components/TopBar.tsx b/src/ui/components/TopBar.tsx new file mode 100644 index 0000000..cf3c1d4 --- /dev/null +++ b/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 ( +
+ TOP BAR BABY +
+ ) + } +} \ No newline at end of file