"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UpdateBrowser = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _Box = require("../Box");

var _Button = require("../Button");

var _Heading = require("../Heading");

var _Image = require("../Image");

var _Link = require("../Link");

var _Text = require("../Text");

var _chrome = _interopRequireDefault(require("./assets/chrome.png"));

var _edge = _interopRequireDefault(require("./assets/edge.png"));

var _firefox = _interopRequireDefault(require("./assets/firefox.png"));

var _opera = _interopRequireDefault(require("./assets/opera.png"));

var _styles = _interopRequireDefault(require("./styles"));

var __jsx = _react["default"].createElement;

var UpdateBrowser = function UpdateBrowser(_ref) {
  var onClick = _ref.onClick,
      href = _ref.href,
      children = _ref.children,
      props = (0, _objectWithoutProperties2["default"])(_ref, ["onClick", "href", "children"]);

  var _useUpdateBrowserStyl = (0, _styles["default"])(null),
      updateBrowserStyleProps = _useUpdateBrowserStyl.updateBrowserStyleProps,
      browserBoxStyleProps = _useUpdateBrowserStyl.browserBoxStyleProps;

  var browsers = [{
    name: 'Google Chrome',
    href: 'https://www.google.com/chrome',
    logo: _chrome["default"]
  }, {
    name: 'Mozilla Firefox',
    href: 'https://www.mozilla.org/firefox/new',
    logo: _firefox["default"]
  }, {
    name: 'Microsoft Edge',
    href: 'https://www.microsoft.com/edge',
    logo: _edge["default"]
  }, {
    name: 'Opera',
    href: 'https://www.opera.com',
    logo: _opera["default"]
  }]; // Component is served to legacy browsers. IE6-8, for example, doesn't support rem units, so use px for UpdateBrowser.

  return __jsx(_Box.Box, updateBrowserStyleProps, __jsx(_Box.Box, {
    display: "table-cell",
    verticalAlign: "middle"
  }, __jsx(_Heading.Heading, {
    kind: "h2"
  }, "Please update your browser."), __jsx(_Text.Text, {
    kind: "large"
  }, "Your browser isn't supported anymore. Update it to get the best experience and access to our latest features."), __jsx(_Box.Box, {
    w: "100%",
    maxWidth: "992px",
    margin: "16px auto",
    textAlign: "center"
  }, browsers.map(function (browser) {
    return __jsx(_Link.Link, (0, _extends2["default"])({}, browserBoxStyleProps, {
      href: browser.href,
      key: browser.name
    }), __jsx(_Image.Image, {
      htmlWidth: "70px",
      src: browser.logo,
      margin: "0 auto 10px"
    }), __jsx(_Text.Text, null, browser.name));
  })), __jsx(_Box.Box, {
    w: "100%",
    "float": "left"
  }, __jsx(_Button.Button, {
    href: href,
    onClick: onClick,
    bg: "blue.500",
    color: "white"
  }, "Remind me later"))));
};

exports.UpdateBrowser = UpdateBrowser;
//# sourceMappingURL=UpdateBrowser.js.map