started with dashboard

This commit is contained in:
Chirag Bhalotia 2022-02-14 12:24:48 +05:30
parent 1067b4bcaf
commit e15c96519c
4 changed files with 116 additions and 0 deletions

View File

@ -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;

View File

@ -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;
}
`

View File

@ -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;

View File