import React from 'react';
import RegularPage from '../RegularPage';
import Link from '../../components/Link';
import Story from '../../components/Story'; //import Icon from '../../components/Icon';

import Wrapper from '../../components/Wrapper';
import { WfpHumEmergencyResponsePos } from '@wfp/pictograms-react';
import markdown from './README.mdx';
export default {
  title: 'Templates/Not found (404)',
  parameters: {
    componentSubtitle: 'Example',
    status: 'released',
    mdx: markdown,
    introText: 'Not Found page is also known as an “error page” or “404” page. This page indicates that the user reached the domain they requested, but the URL path provided no information.',
    previewWidth: 'full'
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(Wrapper, {
    pageWidth: "lg",
    spacing: "md"
  }, /*#__PURE__*/React.createElement(Story, {
    className: "wfp--story__center wfp--story__full-height"
  }, /*#__PURE__*/React.createElement(WfpHumEmergencyResponsePos16, {
    fill: "#007DBC",
    width: 200,
    height: 200,
    style: {
      marginBottom: '3rem',
      transform: 'rotate(10deg)'
    }
  }), /*#__PURE__*/React.createElement("h1", {
    className: "wfp--story__title"
  }, "Under maintenance"), /*#__PURE__*/React.createElement("p", null, "Apologies for the inconvenience; we are performing maintenance at the moment.", /*#__PURE__*/React.createElement("br", null), " [Name of solution] should be back shortly."), /*#__PURE__*/React.createElement("p", null, "Please contact", ' ', /*#__PURE__*/React.createElement(Link, {
    href: "mailto:IT.ServiceDesk@wfp.org"
  }, ' ', "IT.ServiceDesk@wfp.org", ' '), ' ', "if you have any questions or comments."), /*#__PURE__*/React.createElement("p", null, "[Name] Team")));
};
Regular.story = {
  parameters: {
    docs: {
      source: {
        code: "\n\nimport { Wrapper, Story, Icon} from \"@wfp/ui\";\nimport { iconWfpHumEmergencyResponsePos } from '@wfp/icons-react';\n\n<Wrapper pageWidth=\"lg\" spacing=\"md\">\n  <Story className=\"wfp--story__center wfp--story__full-height\">\n    <Icon\n      icon={iconWfpHumEmergencyResponsePos}\n      fill=\"#007DBC\"\n      width={200}\n      height={200}\n      style={{ marginBottom: '3rem', transform: 'rotate(10deg)' }}\n    />\n    <h1 className=\"wfp--story__title\">Under maintenance</h1>\n      <p>\n        Apologies for the inconvenience; we are performing maintenance at the moment.\n        <br/> [Name of solution] should be back shortly. \n      </p>\n      <p>Please contact <Link href=\"https://IT.ServiceDesk@wfp.org\"> IT.ServiceDesk@wfp.org </Link> if you have any questions or comments.</p>\n      <p>[Name] Team</p>\n  </Story>\n</Wrapper>\n      "
      }
    }
  }
};