82 lines
2.5 KiB
JavaScript
82 lines
2.5 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; |