405 lines
18 KiB
JavaScript
405 lines
18 KiB
JavaScript
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;
|