@404pagez/react/dist/esm/index.js

This is templates of 404page for React

import n from"react";function e(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}e("#simple-404 {\n  display: inline-block;\n  text-align: center;\n}\n#simple-404 .main-header {\n  font-size: 3em;\n  word-spacing: 0.5em;\n}\n#simple-404 .body {\n  font-size: 1em;\n  word-spacing: 0.1em;\n}\n#simple-404 .btn-box {\n  margin-top: 30px;\n}");e("#common-button {\n  display: inline-block;\n}\n#common-button .btn {\n  border: none;\n  text-decoration: none;\n  cursor: pointer;\n  padding: 10px 20px;\n  margin: 0;\n  background-color: #00a0ff;\n  color: #fff;\n  border-radius: 15px;\n  font-size: 0.7em;\n}");var t,o={exports:{}};
/*!
  Copyright (c) 2018 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/t=o,function(){var n={}.hasOwnProperty;function e(){for(var t=[],o=0;o<arguments.length;o++){var i=arguments[o];if(i){var a=typeof i;if("string"===a||"number"===a)t.push(i);else if(Array.isArray(i)){if(i.length){var l=e.apply(null,i);l&&t.push(l)}}else if("object"===a)if(i.toString===Object.prototype.toString)for(var r in i)n.call(i,r)&&i[r]&&t.push(r);else t.push(i.toString())}}return t.join(" ")}t.exports?(e.default=e,t.exports=e):window.classNames=e}();var i=o.exports;const a=({label:e,size:t,backgroundColor:o,fontColor:a,fontSize:l,onClick:r,disabled:c})=>n.createElement("div",{id:"common-button"},n.createElement("button",{className:i("btn"),onClick:r,style:{padding:`${t||10}px ${2*(t||10)}px`,backgroundColor:`${o}`,color:`${a}`},disabled:c},e)),l=({size:e,onButtonClick:t,isButton:o,buttonLabel:i,buttonColor:l})=>n.createElement("div",{id:"simple-404",style:{fontSize:`${e}px`}},n.createElement("div",{className:"main-header"},"4 0 4"),n.createElement("div",{className:"body"},"Oops! Page Not Found"),o&&n.createElement("div",{className:"btn-box"},n.createElement(a,{backgroundColor:"string"==typeof l?l:"#000",label:"string"==typeof i?i:"back",onClick:"function"==typeof t?t:null,fontSize:e})));e('#warning-404 {\n  display: inline-block;\n  text-align: center;\n}\n#warning-404 .main-header {\n  font-size: 3em;\n}\n#warning-404 .body {\n  font-size: 1em;\n  word-spacing: 0.1em;\n}\n#warning-404 .btn-box {\n  margin-top: 30px;\n}\n#warning-404 .warning-icon {\n  background-color: #000;\n  width: 0.9em;\n  height: 0.9em;\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  vertical-align: text-top;\n}\n#warning-404 .warning-icon:after {\n  content: "!";\n  display: block;\n  position: absolute;\n  top: 60%;\n  left: 50%;\n  font-size: 0.8em;\n  transform: translate(-50%, -50%);\n  color: #fff;\n}');const r=({size:e,onButtonClick:t,isButton:o,buttonLabel:i,buttonColor:l,color:r})=>n.createElement("div",{id:"warning-404",style:{fontSize:`${e}px`}},n.createElement("div",{className:"main-header"},"4"," ",n.createElement("div",{className:"warning-icon",style:{backgroundColor:`${"string"==typeof r?r:"#000"}`}})," ","4"),n.createElement("div",{className:"body"},"Page Not Found"),o&&n.createElement("div",{className:"btn-box"},n.createElement(a,{backgroundColor:"string"==typeof l?l:"#000",label:"string"==typeof i?i:"back",onClick:"function"==typeof t?t:null,fontSize:e})));e('#section-404 {\n  display: inline-block;\n}\n#section-404:after {\n  display: block;\n  clear: both;\n}\n#section-404 .left {\n  display: inline-block;\n  text-align: center;\n  vertical-align: top;\n}\n#section-404 .left .section-icon {\n  background-color: #000;\n  width: 6.3em;\n  height: 6.3em;\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  vertical-align: text-top;\n}\n#section-404 .left .section-icon:after {\n  content: "404";\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 3em;\n  transform: translate(-50%, -50%);\n  color: #fff;\n}\n#section-404 .right {\n  display: inline-block;\n  text-align: right;\n  margin-left: 30px;\n}\n#section-404 .right .oops {\n  font-size: 2.2em;\n}\n#section-404 .right .text {\n  font-size: 0.9em;\n}\n#section-404 .right .btn-box {\n  margin-top: 1em;\n}');const c=({size:e,onButtonClick:t,isButton:o,buttonLabel:i,buttonColor:l,color:r})=>n.createElement("div",{id:"section-404",style:{fontSize:`${e}px`}},n.createElement("div",{className:"left"},n.createElement("div",{className:"section-icon",style:{backgroundColor:`${"string"==typeof r?r:"#000"}`}})),n.createElement("div",{className:"right"},n.createElement("div",{className:"oops",style:{marginTop:`${o?null:"0.5em"}`}},"Oops!"),n.createElement("div",{className:"text"},"That Page doesn't exist"),o&&n.createElement("div",{className:"btn-box"},n.createElement(a,{backgroundColor:"string"==typeof l?l:"#000",label:"string"==typeof i?i:"back",onClick:"function"==typeof t?t:null,fontSize:e}))));e("#cat-404 {\n  display: inline-block;\n  text-align: center;\n}\n#cat-404 .main-header {\n  font-size: 3em;\n}\n#cat-404 .body {\n  font-size: 1em;\n  word-spacing: 0.1em;\n}\n#cat-404 .btn-box {\n  margin-top: 10px;\n}\n#cat-404 .cat-icon {\n  display: inline-block;\n  width: 1.2em;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n#cat-404 .cat-icon .img {\n  border-radius: 50%;\n}");const s=({size:e,onButtonClick:t,isButton:o,buttonLabel:i,buttonColor:l})=>n.createElement("div",{id:"cat-404",style:{fontSize:`${e}px`}},n.createElement("div",{className:"main-header"},"4",n.createElement("div",{className:"cat-icon"},n.createElement("img",{className:"img",src:"https://user-images.githubusercontent.com/9592408/168426033-dc2416ac-56e1-49c1-b3e1-a022e758bb3f.jpeg",width:"100%",alt:"cat"})),"4"),n.createElement("div",{className:"body"},"WHAT?! PAGE NOT FOUND"),o&&n.createElement("div",{className:"btn-box"},n.createElement(a,{backgroundColor:"string"==typeof l?l:"#000",label:"string"==typeof i?i:"back",onClick:"function"==typeof t?t:null,fontSize:e})));e("#blocked-404 {\n  display: inline-block;\n}\n#blocked-404:after {\n  display: block;\n  clear: both;\n}\n#blocked-404 .left {\n  display: inline-block;\n  text-align: center;\n  vertical-align: top;\n  border-radius: 20px;\n  width: 9em;\n}\n#blocked-404 .left .img {\n  border-radius: 20px;\n}\n#blocked-404 .right {\n  display: inline-block;\n  text-align: right;\n  margin-left: 30px;\n}\n#blocked-404 .right .oops {\n  font-size: 2.2em;\n}\n#blocked-404 .right .text {\n  font-size: 0.9em;\n}\n#blocked-404 .right .btn-box {\n  margin-top: 1em;\n}");const d=({size:e,onButtonClick:t,isButton:o,buttonLabel:i,buttonColor:l})=>n.createElement("div",{id:"blocked-404",style:{fontSize:`${e}px`}},n.createElement("div",{className:"left"},n.createElement("img",{className:"img",src:"https://user-images.githubusercontent.com/9592408/168425383-b77e11b1-201f-4d89-8664-67edcf66027b.jpeg",width:"100%",alt:"img"})),n.createElement("div",{className:"right"},n.createElement("div",{className:"oops",style:{marginTop:`${o?null:"0.5em"}`}},"404"),n.createElement("div",{className:"text"}," ","PAGE NOT FOUND! :("),o&&n.createElement("div",{className:"btn-box"},n.createElement(a,{backgroundColor:"string"==typeof l?l:"#000",label:"string"==typeof i?i:"back",onClick:"function"==typeof t?t:null,fontSize:e}))));export{d as Blocked404,s as Cat404,c as Section404,l as Simple404,r as Warning404};
//# sourceMappingURL=index.js.map