@zohodesk/dot/es/errorstate/RequestUrlNotFound/RequestUrlNotFound.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/lib/Layout';
import UrlNotFound from '@zohodesk/svg/lib/errorstate/version1/UrlNotFound';
import LinkText from "../LinkText/LinkText";
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
import commonStyle from "../EmptyStates.module.css";
import style from "./RequestUrlNotFound.module.css";
export default class RequestUrlNotFound extends React.Component {
  constructor(props) {
    super(props);
    this.responsiveFunc = this.responsiveFunc.bind(this);
  }

  responsiveFunc(_ref) {
    let {
      mediaQueryOR
    } = _ref;
    return {
      tablet: mediaQueryOR([{
        minWidth: 481,
        maxWidth: 768
      }]),
      uptoMobile: mediaQueryOR([{
        maxWidth: 480
      }])
    };
  }

  render() {
    let {
      title,
      subtitle,
      description,
      urlText,
      url,
      onClick,
      dataId,
      customClass
    } = this.props;
    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
      query: this.responsiveFunc
    }, _ref2 => {
      let {
        tablet,
        uptoMobile
      } = _ref2;
      return /*#__PURE__*/React.createElement(Container, {
        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
        dataId: dataId,
        scroll: "vertical"
      }, /*#__PURE__*/React.createElement(Box, {
        className: commonStyle.top
      }, title ? /*#__PURE__*/React.createElement("div", {
        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
      }, /*#__PURE__*/React.createElement(UrlNotFound, {
        isFluid: true,
        dataId: `${dataId}_svg`
      })), /*#__PURE__*/React.createElement(Box, {
        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
      }, /*#__PURE__*/React.createElement("div", {
        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
      }, description), /*#__PURE__*/React.createElement(LinkText, {
        text: urlText,
        href: url,
        onClick: onClick,
        dataId: `${dataId}_link`,
        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
      })));
    });
  }

}
RequestUrlNotFound.propTypes = propTypes;
RequestUrlNotFound.defaultProps = defaultProps; // if (__DOCS__) {
//   RequestUrlNotFound.docs = {
//     componentGroup: 'errorStates'
//   };
// }