78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
import DashboardStyle from './Dashboard.style'
|
|
|
|
function Sidebar1() {
|
|
return (
|
|
<div className="sidebar">
|
|
<ul>
|
|
<div className="nav-item mb-2 brand-name">
|
|
<h1>Brand Name</h1>
|
|
</div>
|
|
<div className="profile">
|
|
<div className="profile-image">
|
|
<img src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg" />
|
|
</div>
|
|
<p className="name">Hayat</p>
|
|
<p className="profession">Product Designer</p>
|
|
</div>
|
|
<div className="creatButton">
|
|
<button className={''}>Create Link</button>
|
|
</div>
|
|
<li className="nav-buttons">
|
|
<div className="nav-item">
|
|
<button>Overview</button>
|
|
</div>
|
|
<div className="nav-item">
|
|
<button>My Links</button>
|
|
</div>
|
|
<div className="nav-item">
|
|
<button>Extras</button>
|
|
</div>
|
|
</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
|