조민지

ui: 킥보드 페이지 레이아웃 구성

/*!
=========================================================
* Light Bootstrap Dashboard React - v1.3.0
=========================================================
* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import Dashboard from "views/Dashboard.jsx";
import UserProfile from "views/UserProfile.jsx";
import TableList from "views/TableList.jsx";
......@@ -22,7 +5,7 @@ import Typography from "views/Typography.jsx";
import Icons from "views/Icons.jsx";
import Maps from "views/Maps.jsx";
import Notifications from "views/Notifications.jsx";
import Upgrade from "views/Upgrade.jsx";
import Kickboard from "views/Kickboard"
const dashboardRoutes = [
{
......@@ -74,6 +57,13 @@ const dashboardRoutes = [
component: Notifications,
layout: "/admin"
},
{
path: "/kickboard",
name: "Kickboard",
icon: "pe-7s-bicycle",
component: Kickboard,
layout: "/admin"
},
];
export default dashboardRoutes;
......
import React from "react";
import ChartistGraph from "react-chartist";
import {Grid, Row, Col, Table} from "react-bootstrap";
import { Card } from "components/Card/Card.jsx";
import { Tasks } from "components/Tasks/Tasks.jsx";
import {
dataBar,
optionsBar,
responsiveBar,
} from "variables/Variables.jsx";
import { thArray, tdArray } from "variables/Variables.jsx";
const Kickboard = () => {
return (
<div className="content">
<Grid fluid>
<Row>
<Col md={3} mdOffset={9} sm={3} smOffset={9} style={{marginBottom:15}}>
<input type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
</Col>
</Row>
<Row>
<Col md={6}>
<Card
id="chartActivity"
title="2014 Sales"
category="All products including Taxes"
stats="마지막 업데이트 2020/04/20 17:23"
statsIcon="fa fa-check"
content={
<div className="ct-chart">
<ChartistGraph
data={dataBar}
type="Bar"
options={optionsBar}
responsiveOptions={responsiveBar}
/>
</div>
}
/>
</Col>
<Col md={6}>
<Card
title="Tasks"
category="Backend development"
stats="Updated 3 minutes ago"
statsIcon="fa fa-history"
content={
<div className="table-full-width">
<table className="table">
<Tasks />
</table>
</div>
}
/>
</Col>
</Row>
<Row>
<Col md={12}>
<Card
title="Striped Table with Hover"
category="Here is a subtitle for this table"
ctTableFullWidth
ctTableResponsive
content={
<Table striped>
<thead>
<tr>
{thArray.map((prop, key) => {
return <th key={key}>{prop}</th>;
})}
</tr>
</thead>
<tbody>
{tdArray.map((prop, key) => {
return (
<tr key={key}>
{prop.map((prop, key) => {
return <td key={key}>{prop}</td>;
})}
</tr>
);
})}
</tbody>
</Table>
}
/>
</Col>
</Row>
</Grid>
</div>
);
}
export default Kickboard;