2020-12-13 11:27:50 +00:00
|
|
|
import React, { Component } from 'react';
|
2020-12-12 20:18:25 +00:00
|
|
|
import { FunctionComponent } from 'react';
|
|
|
|
import { Card, Col, Row } from 'react-bootstrap';
|
|
|
|
|
|
|
|
type CardProps = {
|
|
|
|
title: string,
|
|
|
|
content: string
|
|
|
|
}
|
|
|
|
|
2020-12-13 11:27:50 +00:00
|
|
|
type CardState = {
|
|
|
|
lastUpdate: Date
|
|
|
|
}
|
|
|
|
|
|
|
|
class HCard extends Component<CardProps, CardState> {
|
|
|
|
constructor(props: CardProps) {
|
|
|
|
super(props)
|
|
|
|
}
|
|
|
|
|
|
|
|
tick() {
|
|
|
|
this.setState({
|
|
|
|
lastUpdate: new Date()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this.tick()
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
setInterval(() => this.tick(), 1000)
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Card bg="light" style={{ minWidth: "15rem" }}>
|
|
|
|
<Row className="no-gutters">
|
|
|
|
<Col md={7} className="border-right my-auto">
|
|
|
|
<h3 className="text-center">{this.props.title}</h3>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
<Col md={5}>
|
|
|
|
<Card.Body>
|
|
|
|
<Card.Text className="text-center">
|
|
|
|
{this.props.content}
|
|
|
|
</Card.Text>
|
|
|
|
</Card.Body>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Card.Text className="border-top text-center">
|
|
|
|
<small className="text-muted my-auto mx-2">Last updated {this.state.lastUpdate.toLocaleTimeString('en-GB')}</small>
|
|
|
|
</Card.Text>
|
|
|
|
</Card>);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default HCard;
|