started with dashboard
This commit is contained in:
parent
1067b4bcaf
commit
e15c96519c
|
@ -0,0 +1,62 @@
|
|||
import DashboardStyle from "./Dashboard.style";
|
||||
|
||||
function Sidebar1(){
|
||||
return(
|
||||
<div className="sidebar" style={{backgroundColor:"#696969"}}>
|
||||
<ul>
|
||||
<li className="nav-item mb-2"><h3>Brand Name</h3></li>
|
||||
<li className="nav-item mb-2"><img src="logo.svg" style={{'borderRadius':'5px'}}></img></li>
|
||||
<li className="nav-item mb-2">Hyat</li>
|
||||
<li className="nav-item mb-2">Product Desiner</li>
|
||||
<li className="nav-item mb-2"><button>Create Link</button></li>
|
||||
<li className="nav-item mb-2">Overview</li>
|
||||
<li className="nav-item mb-2">MyLinks</li>
|
||||
<li className="nav-item mb-2">Extras</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
function Sidebar2()
|
||||
{
|
||||
return(
|
||||
<div className="sidebar2">
|
||||
<h2 className="dash">Overview</h2>
|
||||
<div className="row">
|
||||
<div className="column">Box1</div>
|
||||
<div className="column">Box2</div>
|
||||
<div className="column">Box3</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
function Graph()
|
||||
{
|
||||
return (
|
||||
<div className="sidebar2">
|
||||
<div className="row">
|
||||
<div className="column">Daily Insight</div>
|
||||
<div className="column">
|
||||
<ul >
|
||||
<li className="list2">Api Version</li>
|
||||
<li className="list2">Frontend Version</li>
|
||||
<li className="list2">Links generated yet</li>
|
||||
<li className="list2">Total views yet</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<DashboardStyle>
|
||||
<Sidebar1 />
|
||||
<Sidebar2 />
|
||||
<Graph />
|
||||
</DashboardStyle>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
|
@ -0,0 +1,32 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
export default styled.div`
|
||||
.sidebar{
|
||||
float: left;
|
||||
width: 20%;
|
||||
height: 600px;
|
||||
}
|
||||
.nav-item {
|
||||
margin: 2.5rem;
|
||||
list-style-type: none;
|
||||
}
|
||||
.sidebar2{
|
||||
text-align: center;
|
||||
}
|
||||
.dash{
|
||||
text-align: left;
|
||||
margin-left: 1.5px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 30%;
|
||||
height: 200px;
|
||||
}
|
||||
.list2{
|
||||
margin-bottom: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
`
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import Head from "next/head";
|
||||
import NavBar from "../../components/NavBar";
|
||||
import Dashboard from "components/Dashboard/Dashboard"
|
||||
|
||||
function Index(props) {
|
||||
return (
|
||||
<div className={""}>
|
||||
<Head>
|
||||
<title>Dashboard</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main>
|
||||
<NavBar />
|
||||
<Dashboard/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
Loading…
Reference in New Issue