skeleton for helm-dashboard-v2 (#266)

* skeleton for helm-dashboard-v2

* made-necessary changes

dashboard/src/App.css

@@ -0,0 +1,84 @@
+.app-header{
+    display: flex;
+    justify-content: space-between;
+    margin: 5px;
+    padding: 10px;
+}
+.header-left{
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    flex: 0.6;
+}
+.header-items{
+    display: flex;
+    flex: 0.8;
+    justify-content: space-evenly;
+}
+.header-right{
+    display: flex;
+    align-items: center;
+    flex: 0.2;
+    justify-content: space-around;
+}
+.redirect{
+    display: flex;
+    flex: 0.8;
+}
+.redirect>img{
+    margin-right: 5px;
+}
+.card{
+    display: flex;
+    height: 100vh;
+}
+.card-left{
+    flex: 0.2;
+    margin-top: 5px;
+    margin-left: 4px;
+    margin-right: 4px;
+}
+.card-left>h2,form{
+    margin-bottom: 10px;
+}
+.btn{
+    margin-bottom: 10px;
+}
+.card-right{
+    flex: 0.8;
+    margin-top: 5px;
+    margin-left: 4px;
+    margin-right: 1px;
+}
+.card-right-header{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+.card-right-header-right-btn{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+}
+.content-header{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+.title{
+    flex: 0.2;
+}
+.description{
+    flex: 0.6;
+}
+.version{
+    flex: 0.2;
+}
+.charts{
+    display: flex;
+    justify-content: space-between;
+}
+.charts>h3{
+    flex: 0.2;
+}

dashboard/src/App.tsx

@@ -1,46 +1,17 @@
-//import "./App.css";
+import "./App.css";
+import Body from "./layout/Body";
+import Header from "./layout/Header";
 import "./index.css";
+import Sidebar from "./layout/Sidebar";
 
 function App(): JSX.Element {
-  /* using tailwind css utilty classes
-    we create a big card in the center of the screen
-    with a title and instructions on how to run storybook configured
-    for this project. (helm-dashboard projecT).
-    The title is "Welcome to our project!"
-    The instructions include <code> and <pre> tags to display
-    the commands to run storybook and for some troubleshooting.
-    The card is bordered with slightly rounded corners.
-    The card is clickable and will redirect to localhost:6006 
-    where storybook is running.
-    If there are still any issues, the user shouldn't hesitate to ask for help.
-    no login information required. */
+
   return (
-    <div className="flex items-center justify-center h-screen">
-      <div className="max-w-3xl max-h-3xl w-full bg-white shadow-md rounded-lg overflow-hidden">
-        <div className="px-4 py-2">
-          <h1 className="text-2xl font-bold text-gray-800">Welcome to our project!</h1>
-          <p className="mt-2">
-            To run storybook, run the following commands:
-          </p>
-          <pre className="mt-2 border-2 bg-gray-400 rounded-sm">
-            <code className="text-gray-200">
-             &nbsp; npm install &nbsp;<i className="text-gray-300">// to verify that all dependencies are installed</i>
-            <br />
-            &nbsp; npm run storybook 
-            </code>
-          </pre>
-          <p className="mt-2 text-gray-600">
-            If you have trouble, don't hesitate to ask for help.
-          </p>
-        </div>
-        <div className="flex items-center justify-end px-4 py-2 bg-gray-100">
-          <a
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-            href="http://localhost:6006"
-          >
-            Run Storybook
-          </a>
-        </div>
+    <div className="app">
+      <Header/>
+      <div className="card">
+        <Sidebar/>
+        <Body/>
       </div>
     </div>
   );

dashboard/src/layout/Body.tsx

@@ -0,0 +1,14 @@
+import "../App.css"
+import Body_content from './Body_content'
+import Body_header from './Body_header'
+
+function Body():JSX.Element {
+  return (
+    <div className="card-right">
+          <Body_header/>
+          <Body_content/>
+    </div>
+  )
+}
+
+export default Body

dashboard/src/layout/Body_content.tsx

@@ -0,0 +1,20 @@
+import "../App.css"
+
+function Body_content():JSX.Element {
+  return (
+    <div className="card-right-content">
+              <div className="content-header">
+                <h3 className="title">ChartName</h3>
+                <h3 className="description">Description</h3>
+                <h3 className="version">Version</h3>
+              </div>
+              <div className="charts">
+                <h3>Airflow</h3>
+                <p className="description">Desccription about chart</p>
+                <p className="version">14.0.14</p>
+              </div>
+    </div>
+  )
+}
+
+export default Body_content

dashboard/src/layout/Body_header.tsx

@@ -0,0 +1,22 @@
+import '../App.css'
+
+function Body_header() :JSX .Element{
+  return (
+    <div className="card-right-header">
+            <div className="card-right-header-left">
+              <h6>Repo</h6>
+              <h3>bitnami</h3>
+              <p>URL:<a href=""/></p>
+            </div>
+            <div className="card-right-header-right">
+              <div className="card-right-header-right-btn">
+                <button>Update</button>
+                <button>Remove</button>
+              </div>
+              <input placeholder="Filter" type='text'/>
+            </div>
+    </div>
+  )
+}
+
+export default Body_header

dashboard/src/layout/Header.tsx

@@ -0,0 +1,39 @@
+import "../App.css"
+
+function Header():JSX.Element {
+  return (
+    <header className="app-header">
+    <div className="header-left">
+      <div className="logo">
+        <img src="" alt='Helm-DashBoard'/>
+      </div>
+      <div className="vertical-seperator">
+        |
+      </div>
+      <div className="header-items">
+        <h3>Installed</h3>
+        <h3>Repository</h3>
+        <h3>Help</h3>
+        <h3>Upgrade</h3>
+      </div>
+    </div>
+    <div className="header-right">
+        <div className="redirect">
+          <img className='komodor-img'src="" alt='Komodor'/>  
+          <span>
+            <a href="" />
+            <p>Some Content</p>
+          </span>
+        </div>
+        <div className="vertical-seperator">
+          |
+        </div>
+        <div className="signout-btn">
+          <button>Signout</button>
+        </div>
+    </div>
+  </header>
+  )
+}
+
+export default Header

dashboard/src/layout/Sidebar.tsx

@@ -0,0 +1,27 @@
+import '../App.css'
+
+function Sidebar():JSX.Element {
+  return (
+    <div className="card-left">
+          <h2>Repositories</h2>
+          <form>
+            <div className="options">
+              <label>
+                <input type="radio" value=""/>
+                bitnami
+              </label>
+            </div>
+            <div className="options">
+              <label>
+                <input type="radio" value=""/>
+                bitnami
+              </label>
+            </div>
+          </form>
+          <button className="btn">Add Repository</button>
+          <p>Some text that describes chart</p>
+    </div>
+  )
+}
+
+export default Sidebar