import React from "react";
import styled from "styled-components";
import { css } from "emotion";
import { ReactComponent as LogoIcon } from "@svgr/webpack!../assets/logo.svg";
import { ReactComponent as AddFabBg } from "@svgr/webpack!../assets/slide-7-fab-bg.svg";
import { Typography } from "@webiny/ui/Typography";
import { ButtonPrimary } from "@webiny/ui/Button";
var SlideContainer = /*#__PURE__*/styled("div", {
  target: "e4w5xh20",
  label: "SlideContainer"
})({
  display: "flex",
  flexDirection: "column",
  width: 800,
  height: 600,
  alignItems: "center",
  justifyContent: "center",
  paddingBottom: 100,
  boxSizing: "border-box"
});
var Logo = /*#__PURE__*/styled("div", {
  target: "e4w5xh21",
  label: "Logo"
})({
  width: "100%",
  textAlign: "center",
  marginBottom: 20,
  marginTop: 20
});
var Text = /*#__PURE__*/styled("div", {
  target: "e4w5xh22",
  label: "Text"
})({
  paddingTop: 20,
  paddingBottom: 20,
  width: "60%",
  textAlign: "center",
  margin: "0 auto",
  h4: {
    paddingBottom: 20
  }
});
var Footer = /*#__PURE__*/styled("div", {
  target: "e4w5xh23",
  label: "Footer"
})({
  width: "100%",
  padding: 25,
  boxSizing: "border-box",
  backgroundColor: "var(--mdc-theme-background)",
  color: "var(--mdc-theme-text-primary-on-background)",
  position: "absolute",
  bottom: 0,
  textAlign: "center"
});
var getStartedStyle = /*#__PURE__*/css({
  marginTop: 20
}, "label:getStartedStyle;");
var addFabStyle = /*#__PURE__*/css({
  position: "absolute",
  zIndex: -1,
  right: -100,
  bottom: -80
}, "label:addFabStyle;");

var Slide7 = function Slide7(props) {
  return /*#__PURE__*/React.createElement(SlideContainer, null, /*#__PURE__*/React.createElement(Logo, null, /*#__PURE__*/React.createElement(LogoIcon, null)), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Typography, {
    use: "headline4"
  }, "Ready to Start Building?")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Typography, {
    use: "body2"
  }, "Close this dialog, and then click the big green button in the corner to add your first block."))), /*#__PURE__*/React.createElement(ButtonPrimary, {
    onClick: props.closeDialog,
    className: getStartedStyle
  }, "I'm Ready"), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Typography, {
    use: "body1"
  }, "To visit this guide again, just click the help icon in the left toolbar.")), /*#__PURE__*/React.createElement(AddFabBg, {
    className: addFabStyle
  }));
};

export default Slide7;
//# sourceMappingURL=Slide7.js.map