Read me mode example (tax)

import React from "react";
import PropTypes from "prop-types";
import { translate, Trans } from "react-i18next";
import { Tooltip, Icon } from "@ematix/tesseract-component-library";
import TwoColumnWrapper from "../../TwoColumnWrapper";
import cls from "./styles.scss";

const ReadMode = ({ t }) => (
  <TwoColumnWrapper>
    <div className={cls.gridColLeft}>
      <div className={cls.title}>
        <Trans>Taxes Deduction</Trans>
      </div>
      <div className={cls.wrapper}>
        <div className={cls.group}>
          <div className={cls.deduction}>
            <div className={cls.label}>
              <Trans>Tax Deduction Information</Trans>
            </div>
            <div className={cls.content}>
              <Trans>Reason to deduct taxes</Trans>
            </div>
          </div>
        </div>
        <div className={cls.group}>
          <div className={cls.label}>
            <Trans>Amount</Trans>
          </div>
          <div className={cls.content}>3500 CZK</div>
        </div>
      </div>
      <div className={cls.group}>
        <div className={cls.title}>
          <Trans>Who Pays Taxes</Trans>
        </div>
        <div>
          <Trans>Taxes are not paid by company</Trans>
        </div>
      </div>
    </div>
    <div className={cls.gridColRight}>
      <div className={cls.title}>
        <Trans>Children</Trans>
      </div>
      <div className={cls.wrapperChild}>
        <Tooltip
          position="bottom"
          text={t("Press to upload Birth Certificate")}
        >
          <Icon className={cls.icon}>info</Icon>
        </Tooltip>
        <div className={cls.group}>
          <div className={cls.name}>
            <div className={cls.label}>
              <Trans>Child Name</Trans>
            </div>
            <div className={cls.content}>Honza Novak</div>
          </div>
        </div>
        <div className={cls.group}>
          <div className={cls.label}>
            <Trans>Social Security Number</Trans>
          </div>
          <div className={cls.content}>1234567890</div>
        </div>
      </div>
      <div className={cls.wrapperChild}>
        <Tooltip
          position="bottom"
          text={t("Press to upload Birth Certificate")}
        >
          <Icon className={cls.icon}>description</Icon>
        </Tooltip>
        <div className={cls.group}>
          <div className={cls.name}>
            <div className={cls.label}>
              <Trans>Child Name</Trans>
            </div>
            <div className={cls.content}>Honza Novak</div>
          </div>
        </div>
        <div className={cls.group}>
          <div className={cls.label}>
            <Trans>Social Security Number</Trans>
          </div>
          <div className={cls.content}>1234567890</div>
        </div>
      </div>
    </div>
  </TwoColumnWrapper>
);

ReadMode.propTypes = {
  t: PropTypes.func.isRequired,
};

export default translate("ReadMode")(ReadMode);