defined card template

websrc/components/HCard.tsx

@@ -1,40 +1,22 @@
 import React, {Component} from 'react';
-import {Card, Col, Row} from 'react-bootstrap';
 
 type CardProps = {
     title: string,
     content: string,
-    update: Date
 }
 
 
-class HCard extends Component<CardProps> {
+export class SidebarCard extends Component<CardProps> {
     constructor(props: CardProps) {
         super(props)
     }
 
     render() {
         return (
-            <Card bg="light" style={{minWidth: "15rem"}} className="mx-auto">
-                <Row className="no-gutters">
-                    <Col md={7} className="border-right my-auto">
-                        <h5 className="text-center my-auto">{this.props.title}</h5>
-                    </Col>
-
-                    <Col md={5}>
-                        <Card.Body>
-                            <Card.Text className="text-center my-auto">
-                                {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.props.update.toLocaleTimeString('en-GB')}</small>
-                </Card.Text>
-            </Card>);
+            <div className="bg-gray-300 mt-2 mx-4 rounded p-4">
+                <div className="text-gray-600">{this.props.title}</div>
+                <div className="mt-1 mx-auto text-center text-3xl font-semibold">{this.props.content}</div>
+            </div>
+        )
     }
 }
-
-export default HCard;