| /* |
| * 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, CardFooter, CardHeader, Col, Row, Collapse, Fade } from 'reactstrap'; |
| import { AppSwitch } from '@coreui/react' |
| |
| class Cards extends Component { |
| constructor(props) { |
| super(props); |
| |
| this.toggle = this.toggle.bind(this); |
| this.toggleFade = this.toggleFade.bind(this); |
| this.state = { |
| collapse: true, |
| fadeIn: true, |
| timeout: 300 |
| }; |
| } |
| |
| toggle() { |
| this.setState({ collapse: !this.state.collapse }); |
| } |
| |
| toggleFade() { |
| this.setState((prevState) => { return { fadeIn: !prevState }}); |
| } |
| |
| render() { |
| return ( |
| <div className="animated fadeIn"> |
| <Row> |
| <Col xs="12" sm="6" md="4"> |
| <Card> |
| <CardHeader> |
| Card title |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| <CardFooter>Card footer</CardFooter> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-check float-right"></i>Card with icon |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card> |
| <CardHeader> |
| Card with switch |
| <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/> |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card> |
| <CardHeader> |
| Card with label |
| <Badge color="success" className="float-right">Success</Badge> |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card> |
| <CardHeader> |
| Card with label |
| <Badge pill color="danger" className="float-right">42</Badge> |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| <Row> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="border-primary"> |
| <CardHeader> |
| Card outline primary |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="border-secondary"> |
| <CardHeader> |
| Card outline secondary |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="border-success"> |
| <CardHeader> |
| Card outline success |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="border-info"> |
| <CardHeader> |
| Card outline info |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="border-warning"> |
| <CardHeader> |
| Card outline warning |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="border-danger"> |
| <CardHeader> |
| Card outline danger |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| |
| <Row> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="card-accent-primary"> |
| <CardHeader> |
| Card with accent |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="card-accent-secondary"> |
| <CardHeader> |
| Card with accent |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="card-accent-success"> |
| <CardHeader> |
| Card with accent |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="card-accent-info"> |
| <CardHeader> |
| Card with accent |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="card-accent-warning"> |
| <CardHeader> |
| Card with accent |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="card-accent-danger"> |
| <CardHeader> |
| Card with accent |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| <Row> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-primary text-center"> |
| <CardBody> |
| <blockquote className="card-bodyquote"> |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> |
| <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> |
| </blockquote> |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-success text-center"> |
| <CardBody> |
| <blockquote className="card-bodyquote"> |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> |
| <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> |
| </blockquote> |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-info text-center"> |
| <CardBody> |
| <blockquote className="card-bodyquote"> |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> |
| <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> |
| </blockquote> |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-warning text-center"> |
| <CardBody> |
| <blockquote className="card-bodyquote"> |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> |
| <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> |
| </blockquote> |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-danger text-center"> |
| <CardBody> |
| <blockquote className="card-bodyquote"> |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> |
| <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> |
| </blockquote> |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-primary text-center"> |
| <CardBody> |
| <blockquote className="card-bodyquote"> |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> |
| <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> |
| </blockquote> |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| <Row> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-primary"> |
| <CardHeader> |
| Card title |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-success"> |
| <CardHeader> |
| Card title |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-info"> |
| <CardHeader> |
| Card title |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-warning"> |
| <CardHeader> |
| Card title |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Card className="text-white bg-danger"> |
| <CardHeader> |
| Card title |
| </CardHeader> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Card> |
| </Col> |
| <Col xs="12" sm="6" md="4"> |
| <Fade timeout={this.state.timeout} in={this.state.fadeIn}> |
| <Card> |
| <CardHeader> |
| Card actions |
| <div className="card-header-actions"> |
| <a href="#" className="card-header-action btn btn-setting"><i className="icon-settings"></i></a> |
| <a className="card-header-action btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></a> |
| <a className="card-header-action btn btn-close" onClick={this.toggleFade}><i className="icon-close"></i></a> |
| </div> |
| </CardHeader> |
| <Collapse isOpen={this.state.collapse} id="collapseExample"> |
| <CardBody> |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
| laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation |
| ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| </CardBody> |
| </Collapse> |
| </Card> |
| </Fade> |
| </Col> |
| |
| </Row> |
| </div> |
| ); |
| } |
| } |
| |
| export default Cards; |