| /* |
| * Copyright (c) 2018 StreamNative. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| import React, { Component } from 'react'; |
| import { Badge, Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap'; |
| |
| import usersData from './UsersData' |
| |
| function UserRow(props) { |
| const user = props.user |
| const userLink = `#/users/${user.id}` |
| |
| const getBadge = (status) => { |
| return status === 'Active' ? 'success' : |
| status === 'Inactive' ? 'secondary' : |
| status === 'Pending' ? 'warning' : |
| status === 'Banned' ? 'danger' : |
| 'primary' |
| } |
| |
| return ( |
| <tr key={user.id.toString()}> |
| <th scope="row"><a href={userLink}>{user.id}</a></th> |
| <td><a href={userLink}>{user.name}</a></td> |
| <td>{user.registered}</td> |
| <td>{user.role}</td> |
| <td><Badge href={userLink} color={getBadge(user.status)}>{user.status}</Badge></td> |
| </tr> |
| ) |
| } |
| |
| class Users extends Component { |
| |
| render() { |
| |
| const userList = usersData.filter((user) => user.id < 10) |
| |
| return ( |
| <div className="animated fadeIn"> |
| <Row> |
| <Col xl={6}> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i> Users <small className="text-muted">example</small> |
| </CardHeader> |
| <CardBody> |
| <Table responsive hover> |
| <thead> |
| <tr> |
| <th scope="col">id</th> |
| <th scope="col">name</th> |
| <th scope="col">registered</th> |
| <th scope="col">role</th> |
| <th scope="col">status</th> |
| </tr> |
| </thead> |
| <tbody> |
| {userList.map((user, index) => |
| <UserRow key={index} user={user}/> |
| )} |
| </tbody> |
| </Table> |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| </div> |
| ) |
| } |
| } |
| |
| export default Users; |