web2.0-frontend/src/components/Card/Card.tsx

import * as React from "react";
import Button, { ButtonType } from "../Button/Button";
import "./Card.scss";
import Anchor from "../Anchor";

export interface CardProps {
  title: string;
  start_time: string;
  text: string;
  link?: string;
  image?: string;
  button?: JSX.Element;
}
export interface CardState { }

class Card extends React.Component<CardProps, CardState> {
  render() {
    const { title, text, link, image, button } = 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);

    const imageElem = !!image ? (
      <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
    ) : null;
    if (link) {
      return (
        <Anchor to={link} className="card">
          {imageElem}
          <div className="card__datetime">{datetime}</div>
          <div className="card__title">{title}</div>
          <div className="card__text">{text}</div>
          <div className="card__button">{button}</div>
        </Anchor>
      );
    } else {
      return (
        <div className="card">
          {imageElem}
          <div className="card__datetime">{datetime}</div>
          <div className="card__title">{title}</div>
          <div className="card__text">{text}</div>
          {button}
        </div>
      );
    }

  }
}

export default Card;