Add datetime to event page section

src/components/Card/Card.scss

@@ -9,7 +9,7 @@
   margin: 1rem 1rem;
 
   &__title {
-    font-weight: bold;
+    text-align: center;
     font-size: 1.4rem;
     padding: 1rem;
     display: flex;
@@ -25,4 +25,11 @@
     font-weight: lighter;
     padding: 1rem;
   }
+
+  &__datetime {
+    color: $orange1;
+    text-align: center;
+    font-size: 0.8rem;
+    font-weight: bold;
+  }
 }

src/components/Card/Card.tsx

@@ -4,6 +4,7 @@ import "./Card.scss";
 
 export interface CardProps {
   title: string;
+  start_time: string;
   text: string;
   image: string;
 }
@@ -12,8 +13,17 @@ export interface CardState {}
 class Card extends React.Component<CardProps, CardState> {
   render() {
     const { title, text, image } = this.props;
+    let options = {
+      day: "numeric",
+      month: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    };
+    const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
     return (
       <Link to="/events/1" className="card">
+        <div className="card__datetime">{datetime}</div>
         <div className="card__title">{title}</div>
         <img src={image} className="card__image" />
         <div className="card__text">{text}</div>

src/models/Event.ts

@@ -6,6 +6,7 @@ export interface Event {
   id: number;
   title: string;
   description: string;
+  start_time: string;
 }
 
 export async function getEvents(): Promise<Event[]> {