` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nvar useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n/**\n * @ignore - internal component.\n */\n\nfunction Ripple(props) {\n var classes = props.classes,\n _props$pulsate = props.pulsate,\n pulsate = _props$pulsate === void 0 ? false : _props$pulsate,\n rippleX = props.rippleX,\n rippleY = props.rippleY,\n rippleSize = props.rippleSize,\n inProp = props.in,\n _props$onExited = props.onExited,\n onExited = _props$onExited === void 0 ? function () {} : _props$onExited,\n timeout = props.timeout;\n\n var _React$useState = React.useState(false),\n leaving = _React$useState[0],\n setLeaving = _React$useState[1];\n\n var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n var rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n var handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority\n\n useEnhancedEffect(function () {\n if (!inProp) {\n // react-transition-group#onExit\n setLeaving(true); // react-transition-group#onExited\n\n var timeoutId = setTimeout(handleExited, timeout);\n return function () {\n clearTimeout(timeoutId);\n };\n }\n\n return undefined;\n }, [handleExited, inProp, timeout]);\n return /*#__PURE__*/React.createElement(\"span\", {\n className: rippleClassName,\n style: rippleStyles\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: childClassName\n }));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Ripple from './Ripple';\nvar DURATION = 550;\nexport var DELAY_RIPPLE = 80;\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n },\n\n /* Styles applied to the internal `Ripple` components `ripple` class. */\n ripple: {\n opacity: 0,\n position: 'absolute'\n },\n\n /* Styles applied to the internal `Ripple` components `rippleVisible` class. */\n rippleVisible: {\n opacity: 0.3,\n transform: 'scale(1)',\n animation: \"$enter \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n\n /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */\n ripplePulsate: {\n animationDuration: \"\".concat(theme.transitions.duration.shorter, \"ms\")\n },\n\n /* Styles applied to the internal `Ripple` components `child` class. */\n child: {\n opacity: 1,\n display: 'block',\n width: '100%',\n height: '100%',\n borderRadius: '50%',\n backgroundColor: 'currentColor'\n },\n\n /* Styles applied to the internal `Ripple` components `childLeaving` class. */\n childLeaving: {\n opacity: 0,\n animation: \"$exit \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n\n /* Styles applied to the internal `Ripple` components `childPulsate` class. */\n childPulsate: {\n position: 'absolute',\n left: 0,\n top: 0,\n animation: \"$pulsate 2500ms \".concat(theme.transitions.easing.easeInOut, \" 200ms infinite\")\n },\n '@keyframes enter': {\n '0%': {\n transform: 'scale(0)',\n opacity: 0.1\n },\n '100%': {\n transform: 'scale(1)',\n opacity: 0.3\n }\n },\n '@keyframes exit': {\n '0%': {\n opacity: 1\n },\n '100%': {\n opacity: 0\n }\n },\n '@keyframes pulsate': {\n '0%': {\n transform: 'scale(1)'\n },\n '50%': {\n transform: 'scale(0.92)'\n },\n '100%': {\n transform: 'scale(1)'\n }\n }\n };\n};\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\n\nvar TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(props, ref) {\n var _props$center = props.center,\n centerProp = _props$center === void 0 ? false : _props$center,\n classes = props.classes,\n className = props.className,\n other = _objectWithoutProperties(props, [\"center\", \"classes\", \"className\"]);\n\n var _React$useState = React.useState([]),\n ripples = _React$useState[0],\n setRipples = _React$useState[1];\n\n var nextKey = React.useRef(0);\n var rippleCallback = React.useRef(null);\n React.useEffect(function () {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]); // Used to filter out mouse emulated events on mobile.\n\n var ignoringMouseDown = React.useRef(false); // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n\n var startTimer = React.useRef(null); // This is the hook called once the previous timeout is ready.\n\n var startTimerCommit = React.useRef(null);\n var container = React.useRef(null);\n React.useEffect(function () {\n return function () {\n clearTimeout(startTimer.current);\n };\n }, []);\n var startCommit = React.useCallback(function (params) {\n var pulsate = params.pulsate,\n rippleX = params.rippleX,\n rippleY = params.rippleY,\n rippleSize = params.rippleSize,\n cb = params.cb;\n setRipples(function (oldRipples) {\n return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/React.createElement(Ripple, {\n key: nextKey.current,\n classes: classes,\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n })]);\n });\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n var start = React.useCallback(function () {\n var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var cb = arguments.length > 2 ? arguments[2] : undefined;\n var _options$pulsate = options.pulsate,\n pulsate = _options$pulsate === void 0 ? false : _options$pulsate,\n _options$center = options.center,\n center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,\n _options$fakeElement = options.fakeElement,\n fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;\n\n if (event.type === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n\n if (event.type === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n\n var element = fakeElement ? null : container.current;\n var rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n }; // Get the size of the ripple\n\n var rippleX;\n var rippleY;\n var rippleSize;\n\n if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n var _ref = event.touches ? event.touches[0] : event,\n clientX = _ref.clientX,\n clientY = _ref.clientY;\n\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n\n if (center) {\n rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.\n\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));\n } // Touche devices\n\n\n if (event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = function () {\n startCommit({\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }; // Delay the execution of the ripple effect.\n\n\n startTimer.current = setTimeout(function () {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n }, DELAY_RIPPLE); // We have to make a tradeoff with this value.\n }\n } else {\n startCommit({\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }\n }, [centerProp, startCommit]);\n var pulsate = React.useCallback(function () {\n start({}, {\n pulsate: true\n });\n }, [start]);\n var stop = React.useCallback(function (event, cb) {\n clearTimeout(startTimer.current); // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n\n if (event.type === 'touchend' && startTimerCommit.current) {\n event.persist();\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.current = setTimeout(function () {\n stop(event, cb);\n });\n return;\n }\n\n startTimerCommit.current = null;\n setRipples(function (oldRipples) {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, []);\n React.useImperativeHandle(ref, function () {\n return {\n pulsate: pulsate,\n start: start,\n stop: stop\n };\n }, [pulsate, start, stop]);\n return /*#__PURE__*/React.createElement(\"span\", _extends({\n className: clsx(classes.root, className),\n ref: container\n }, other), /*#__PURE__*/React.createElement(TransitionGroup, {\n component: null,\n exit: true\n }, ripples));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default withStyles(styles, {\n flip: false,\n name: 'MuiTouchRipple'\n})( /*#__PURE__*/React.memo(TouchRipple));","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport * as ReactDOM from 'react-dom';\nimport clsx from 'clsx';\nimport { elementTypeAcceptingRef, refType } from '@material-ui/utils';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport withStyles from '../styles/withStyles';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n '-moz-appearance': 'none',\n // Reset\n '-webkit-appearance': 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n\n },\n '&$disabled': {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Pseudo-class applied to the root element if keyboard focused. */\n focusVisible: {}\n};\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\n\nvar ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {\n var action = props.action,\n buttonRefProp = props.buttonRef,\n _props$centerRipple = props.centerRipple,\n centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n component = _props$component === void 0 ? 'button' : _props$component,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableRipple = props.disableRipple,\n disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,\n _props$disableTouchRi = props.disableTouchRipple,\n disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,\n _props$focusRipple = props.focusRipple,\n focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,\n focusVisibleClassName = props.focusVisibleClassName,\n onBlur = props.onBlur,\n onClick = props.onClick,\n onFocus = props.onFocus,\n onFocusVisible = props.onFocusVisible,\n onKeyDown = props.onKeyDown,\n onKeyUp = props.onKeyUp,\n onMouseDown = props.onMouseDown,\n onMouseLeave = props.onMouseLeave,\n onMouseUp = props.onMouseUp,\n onTouchEnd = props.onTouchEnd,\n onTouchMove = props.onTouchMove,\n onTouchStart = props.onTouchStart,\n onDragLeave = props.onDragLeave,\n _props$tabIndex = props.tabIndex,\n tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n TouchRippleProps = props.TouchRippleProps,\n _props$type = props.type,\n type = _props$type === void 0 ? 'button' : _props$type,\n other = _objectWithoutProperties(props, [\"action\", \"buttonRef\", \"centerRipple\", \"children\", \"classes\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"onBlur\", \"onClick\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"onDragLeave\", \"tabIndex\", \"TouchRippleProps\", \"type\"]);\n\n var buttonRef = React.useRef(null);\n\n function getButtonNode() {\n // #StrictMode ready\n return ReactDOM.findDOMNode(buttonRef.current);\n }\n\n var rippleRef = React.useRef(null);\n\n var _React$useState = React.useState(false),\n focusVisible = _React$useState[0],\n setFocusVisible = _React$useState[1];\n\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n\n var _useIsFocusVisible = useIsFocusVisible(),\n isFocusVisible = _useIsFocusVisible.isFocusVisible,\n onBlurVisible = _useIsFocusVisible.onBlurVisible,\n focusVisibleRef = _useIsFocusVisible.ref;\n\n React.useImperativeHandle(action, function () {\n return {\n focusVisible: function focusVisible() {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n };\n }, []);\n React.useEffect(function () {\n if (focusVisible && focusRipple && !disableRipple) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible]);\n\n function useRippleHandler(rippleAction, eventCallback) {\n var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;\n return useEventCallback(function (event) {\n if (eventCallback) {\n eventCallback(event);\n }\n\n var ignore = skipRippleAction;\n\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n\n return true;\n });\n }\n\n var handleMouseDown = useRippleHandler('start', onMouseDown);\n var handleDragLeave = useRippleHandler('stop', onDragLeave);\n var handleMouseUp = useRippleHandler('stop', onMouseUp);\n var handleMouseLeave = useRippleHandler('stop', function (event) {\n if (focusVisible) {\n event.preventDefault();\n }\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n var handleTouchStart = useRippleHandler('start', onTouchStart);\n var handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n var handleTouchMove = useRippleHandler('stop', onTouchMove);\n var handleBlur = useRippleHandler('stop', function (event) {\n if (focusVisible) {\n onBlurVisible(event);\n setFocusVisible(false);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n var handleFocus = useEventCallback(function (event) {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n\n if (isFocusVisible(event)) {\n setFocusVisible(true);\n\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n\n if (onFocus) {\n onFocus(event);\n }\n });\n\n var isNonNativeButton = function isNonNativeButton() {\n var button = getButtonNode();\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n /**\n * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n\n\n var keydownRef = React.useRef(false);\n var handleKeyDown = useEventCallback(function (event) {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n event.persist();\n rippleRef.current.stop(event, function () {\n rippleRef.current.start(event);\n });\n }\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n } // Keyboard accessibility for non interactive elements\n\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n\n if (onClick) {\n onClick(event);\n }\n }\n });\n var handleKeyUp = useEventCallback(function (event) {\n // calling preventDefault in keyUp on a \r\n \r\n Pokémons\r\n \r\n \r\n \r\n \r\n {pokeUrl.length > 0 ? <>{mapPokeImg} : \r\n \r\n )\r\n}\r\n\r\nexport default PaginaHome\r\n\r\n\r\n","import styled from \"styled-components\";\r\n\r\nexport const ErrorImg = styled.img`\r\n\r\nwidth: 50vw;\r\nmax-height: 60vh;\r\n\r\n`\r\n\r\n","import React from 'react';\r\nimport erro from \"../../assets/error.jpg\"\r\nimport { ErrorImg } from './styled';\r\n\r\nexport function NotFound() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Pokédex\r\n \r\n \r\n \r\n \r\n );\r\n}","import * as React from 'react';\nimport createSvgIcon from './utils/createSvgIcon';\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z\"\n}), 'DeleteOutlined');","import React, { useContext } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { goToDetails } from '../../routes/coordinatis';\r\nimport { GlobalContext } from '../../contexts/GlobalContext/GlobalStateContext';\r\nimport HeaderPokedex from './HeaderPokedex';\r\nimport { CartaoPokemon, ContainerBotao, Container, ContainerVazio } from \"./styled\";\r\nimport { Button } from \"@material-ui/core\";\r\nimport { DeleteOutlined, InfoOutlined } from '@material-ui/icons'\r\nimport Loading from '../../componentes/Loading/Loading';\r\n\r\nexport function Pokedex() {\r\n const history = useHistory()\r\n const [pokedex, setPokedex] = useContext(GlobalContext)\r\n\r\n const removerPokemon = (pokeId) => {\r\n let remove = pokedex.filter((poke) => {\r\n return pokeId !== poke\r\n })\r\n setPokedex(remove)\r\n }\r\n\r\n const mapPokemons = pokedex.map((poke, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n })\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {props.pokemon.name.toUpperCase()}\r\n \r\n\r\n {mudaBotao ?\r\n \r\n adicionarERemoverPokemon()}\r\n >\r\n Remover da Pokédex\r\n \r\n :\r\n adicionarERemoverPokemon()}\r\n >\r\n Adicionar a Pokédex\r\n }\r\n \r\n \r\n \r\n );\r\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { makeStyles as makeStylesWithoutDefault } from '@material-ui/styles';\nimport defaultTheme from './defaultTheme';\n\nfunction makeStyles(stylesOrCreator) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n return makeStylesWithoutDefault(stylesOrCreator, _extends({\n defaultTheme: defaultTheme\n }, options));\n}\n\nexport default makeStyles;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n padding: 16,\n '&:last-child': {\n paddingBottom: 24\n }\n }\n};\nvar CardContent = /*#__PURE__*/React.forwardRef(function CardContent(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? CardContent.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiCardContent'\n})(CardContent);","export default {\n disabled: false\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n * \n * {state => (\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `` component that first enter transition does result in\n * > additional `.appear-*` classes, that way you can choose to style it\n * > differently.\n */\n appear: PropTypes.bool,\n\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided.\n *\n * You may specify a single timeout for all transitions:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return pt.apply(void 0, [props].concat(args));\n },\n\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. Timeouts are still used as a fallback if provided.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {}; // Name the function so it is clearer in the documentation\n\nfunction noop() {}\n\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","export var reflow = function reflow(node) {\n return node.scrollTop;\n};\nexport function getTransitionProps(props, options) {\n var timeout = props.timeout,\n _props$style = props.style,\n style = _props$style === void 0 ? {} : _props$style;\n return {\n duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,\n delay: style.transitionDelay\n };\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { Transition } from 'react-transition-group';\nimport withStyles from '../styles/withStyles';\nimport { duration } from '../styles/transitions';\nimport { getTransitionProps } from '../transitions/utils';\nimport useTheme from '../styles/useTheme';\nimport { useForkRef } from '../utils';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the container element. */\n container: {\n height: 0,\n overflow: 'hidden',\n transition: theme.transitions.create('height')\n },\n\n /* Styles applied to the container element when the transition has entered. */\n entered: {\n height: 'auto',\n overflow: 'visible'\n },\n\n /* Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. */\n hidden: {\n visibility: 'hidden'\n },\n\n /* Styles applied to the outer wrapper element. */\n wrapper: {\n // Hack to get children with a negative margin to not falsify the height computation.\n display: 'flex'\n },\n\n /* Styles applied to the inner wrapper element. */\n wrapperInner: {\n width: '100%'\n }\n };\n};\n/**\n * The Collapse transition is used by the\n * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\n\nvar Collapse = /*#__PURE__*/React.forwardRef(function Collapse(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$collapsedHeigh = props.collapsedHeight,\n collapsedHeightProp = _props$collapsedHeigh === void 0 ? '0px' : _props$collapsedHeigh,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$disableStrictM = props.disableStrictModeCompat,\n disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,\n inProp = props.in,\n onEnter = props.onEnter,\n onEntered = props.onEntered,\n onEntering = props.onEntering,\n onExit = props.onExit,\n onExited = props.onExited,\n onExiting = props.onExiting,\n style = props.style,\n _props$timeout = props.timeout,\n timeout = _props$timeout === void 0 ? duration.standard : _props$timeout,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"collapsedHeight\", \"component\", \"disableStrictModeCompat\", \"in\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"style\", \"timeout\", \"TransitionComponent\"]);\n\n var theme = useTheme();\n var timer = React.useRef();\n var wrapperRef = React.useRef(null);\n var autoTransitionDuration = React.useRef();\n var collapsedHeight = typeof collapsedHeightProp === 'number' ? \"\".concat(collapsedHeightProp, \"px\") : collapsedHeightProp;\n React.useEffect(function () {\n return function () {\n clearTimeout(timer.current);\n };\n }, []);\n var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;\n var nodeRef = React.useRef(null);\n var handleRef = useForkRef(ref, enableStrictModeCompat ? nodeRef : undefined);\n\n var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {\n return function (nodeOrAppearing, maybeAppearing) {\n if (callback) {\n var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],\n _ref2 = _slicedToArray(_ref, 2),\n node = _ref2[0],\n isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.\n\n\n if (isAppearing === undefined) {\n callback(node);\n } else {\n callback(node, isAppearing);\n }\n }\n };\n };\n\n var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {\n node.style.height = collapsedHeight;\n\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n });\n var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {\n var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;\n\n var _getTransitionProps = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'enter'\n }),\n transitionDuration = _getTransitionProps.duration;\n\n if (timeout === 'auto') {\n var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);\n node.style.transitionDuration = \"\".concat(duration2, \"ms\");\n autoTransitionDuration.current = duration2;\n } else {\n node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : \"\".concat(transitionDuration, \"ms\");\n }\n\n node.style.height = \"\".concat(wrapperHeight, \"px\");\n\n if (onEntering) {\n onEntering(node, isAppearing);\n }\n });\n var handleEntered = normalizedTransitionCallback(function (node, isAppearing) {\n node.style.height = 'auto';\n\n if (onEntered) {\n onEntered(node, isAppearing);\n }\n });\n var handleExit = normalizedTransitionCallback(function (node) {\n var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;\n node.style.height = \"\".concat(wrapperHeight, \"px\");\n\n if (onExit) {\n onExit(node);\n }\n });\n var handleExited = normalizedTransitionCallback(onExited);\n var handleExiting = normalizedTransitionCallback(function (node) {\n var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;\n\n var _getTransitionProps2 = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'exit'\n }),\n transitionDuration = _getTransitionProps2.duration;\n\n if (timeout === 'auto') {\n var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);\n node.style.transitionDuration = \"\".concat(duration2, \"ms\");\n autoTransitionDuration.current = duration2;\n } else {\n node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : \"\".concat(transitionDuration, \"ms\");\n }\n\n node.style.height = collapsedHeight;\n\n if (onExiting) {\n onExiting(node);\n }\n });\n\n var addEndListener = function addEndListener(nodeOrNext, maybeNext) {\n var next = enableStrictModeCompat ? nodeOrNext : maybeNext;\n\n if (timeout === 'auto') {\n timer.current = setTimeout(next, autoTransitionDuration.current || 0);\n }\n };\n\n return /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n in: inProp,\n onEnter: handleEnter,\n onEntered: handleEntered,\n onEntering: handleEntering,\n onExit: handleExit,\n onExited: handleExited,\n onExiting: handleExiting,\n addEndListener: addEndListener,\n nodeRef: enableStrictModeCompat ? nodeRef : undefined,\n timeout: timeout === 'auto' ? null : timeout\n }, other), function (state, childProps) {\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.container, className, {\n 'entered': classes.entered,\n 'exited': !inProp && collapsedHeight === '0px' && classes.hidden\n }[state]),\n style: _extends({\n minHeight: collapsedHeight\n }, style),\n ref: handleRef\n }, childProps), /*#__PURE__*/React.createElement(\"div\", {\n className: classes.wrapper,\n ref: wrapperRef\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.wrapperInner\n }, children)));\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Collapse.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content node to be collapsed.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The height of the container when collapsed.\n */\n collapsedHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * Enable this prop if you encounter 'Function components cannot be given refs',\n * use `unstable_createStrictModeTheme`,\n * and can't forward the ref in the passed `Component`.\n */\n disableStrictModeCompat: PropTypes.bool,\n\n /**\n * If `true`, the component will transition in.\n */\n in: PropTypes.bool,\n\n /**\n * @ignore\n */\n onEnter: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntered: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntering: PropTypes.func,\n\n /**\n * @ignore\n */\n onExit: PropTypes.func,\n\n /**\n * @ignore\n */\n onExited: PropTypes.func,\n\n /**\n * @ignore\n */\n onExiting: PropTypes.func,\n\n /**\n * @ignore\n */\n style: PropTypes.object,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n *\n * Set to 'auto' to automatically calculate transition time based on height.\n */\n timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })])\n} : void 0;\nCollapse.muiSupportAuto = true;\nexport default withStyles(styles, {\n name: 'MuiCollapse'\n})(Collapse);","import { useTheme as useThemeWithoutDefault } from '@material-ui/styles';\nimport React from 'react';\nimport defaultTheme from './defaultTheme';\nexport default function useTheme() {\n var theme = useThemeWithoutDefault() || defaultTheme;\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue(theme);\n }\n\n return theme;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport { fade } from '../styles/colorManipulator';\nimport ButtonBase from '../ButtonBase';\nimport capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n textAlign: 'center',\n flex: '0 0 auto',\n fontSize: theme.typography.pxToRem(24),\n padding: 12,\n borderRadius: '50%',\n overflow: 'visible',\n // Explicitly set the default value to solve a bug on IE 11.\n color: theme.palette.action.active,\n transition: theme.transitions.create('background-color', {\n duration: theme.transitions.duration.shortest\n }),\n '&:hover': {\n backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n },\n '&$disabled': {\n backgroundColor: 'transparent',\n color: theme.palette.action.disabled\n }\n },\n\n /* Styles applied to the root element if `edge=\"start\"`. */\n edgeStart: {\n marginLeft: -12,\n '$sizeSmall&': {\n marginLeft: -3\n }\n },\n\n /* Styles applied to the root element if `edge=\"end\"`. */\n edgeEnd: {\n marginRight: -12,\n '$sizeSmall&': {\n marginRight: -3\n }\n },\n\n /* Styles applied to the root element if `color=\"inherit\"`. */\n colorInherit: {\n color: 'inherit'\n },\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n color: theme.palette.secondary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the root element if `size=\"small\"`. */\n sizeSmall: {\n padding: 3,\n fontSize: theme.typography.pxToRem(18)\n },\n\n /* Styles applied to the children container element. */\n label: {\n width: '100%',\n display: 'flex',\n alignItems: 'inherit',\n justifyContent: 'inherit'\n }\n };\n};\n/**\n * Refer to the [Icons](/components/icons/) section of the documentation\n * regarding the available icon options.\n */\n\nvar IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {\n var _props$edge = props.edge,\n edge = _props$edge === void 0 ? false : _props$edge,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'default' : _props$color,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableFocusRi = props.disableFocusRipple,\n disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n other = _objectWithoutProperties(props, [\"edge\", \"children\", \"classes\", \"className\", \"color\", \"disabled\", \"disableFocusRipple\", \"size\"]);\n\n return /*#__PURE__*/React.createElement(ButtonBase, _extends({\n className: clsx(classes.root, className, color !== 'default' && classes[\"color\".concat(capitalize(color))], disabled && classes.disabled, size === \"small\" && classes[\"size\".concat(capitalize(size))], {\n 'start': classes.edgeStart,\n 'end': classes.edgeEnd\n }[edge]),\n centerRipple: true,\n focusRipple: !disableFocusRipple,\n disabled: disabled,\n ref: ref\n }, other), /*#__PURE__*/React.createElement(\"span\", {\n className: classes.label\n }, children));\n});\nprocess.env.NODE_ENV !== \"production\" ? IconButton.propTypes = {\n /**\n * The icon element.\n */\n children: chainPropTypes(PropTypes.node, function (props) {\n var found = React.Children.toArray(props.children).some(function (child) {\n return /*#__PURE__*/React.isValidElement(child) && child.props.onClick;\n });\n\n if (found) {\n return new Error(['Material-UI: You are providing an onClick event listener ' + 'to a child of a button element.', 'Firefox will never trigger the event.', 'You should move the onClick listener to the parent button element.', 'https://github.com/mui-org/material-ui/issues/13957'].join('\\n'));\n }\n\n return null;\n }),\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),\n\n /**\n * If `true`, the button will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the keyboard focus ripple will be disabled.\n */\n disableFocusRipple: PropTypes.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: PropTypes.bool,\n\n /**\n * If given, uses a negative margin to counteract the padding on one\n * side (this is often helpful for aligning the left or right\n * side of the icon with content above or below, without ruining the border\n * size and shape).\n */\n edge: PropTypes.oneOf(['start', 'end', false]),\n\n /**\n * The size of the button.\n * `small` is equivalent to the dense button styling.\n */\n size: PropTypes.oneOf(['small', 'medium'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiIconButton'\n})(IconButton);","import React, { useEffect, useState } from \"react\";\r\nimport { fetchPokemon } from \"../../request/request\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport {\r\n CartaoPokemonDetalhes,\r\n CartaoPokemonStatus,\r\n CartaoPokemonTipo,\r\n} from \"./styled\";\r\nimport { Typography, CardMedia } from \"@material-ui/core\";\r\nimport { ContainerHome } from \"../PaginaHome/styled\";\r\nimport HeaderDetalhes from \"./HeaderDetalhes\";\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport clsx from 'clsx';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport Loading from \"../../componentes/Loading/Loading\";\r\n\r\nconst PaginaDetalhes = ({ match }) => {\r\n\r\n const [pokemon, setPokemon] = useState(undefined);\r\n const [loading, setLoading] = useState(true);\r\n const [expanded, setExpanded] = React.useState(false);\r\n const history = useHistory();\r\n\r\n const useStyles = makeStyles((theme) => ({\r\n root: {\r\n maxWidth: 345,\r\n },\r\n media: {\r\n height: 0,\r\n paddingTop: '56.25%', // 16:9\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n }));\r\n\r\n const classes = useStyles();\r\n\r\n const handleExpandClick = () => {\r\n setExpanded(!expanded);\r\n };\r\n\r\n useEffect(() => {\r\n fetchPokemon(match.params.id).then((response) => {\r\n setPokemon(response)\r\n setLoading(false);\r\n })\r\n }, [match.params.id])\r\n\r\n if (loading) {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n \r\n Lista de Habilidades\r\n \r\n \r\n \r\n \r\n \r\n \r\n {pokemon.moves.map((move, index) => {\r\n if (index === 0) return \r\n \r\n \r\n \r\n \r\n )\r\n};\r\nexport default PaginaDetalhes","import { BrowserRouter, Switch, Route } from \"react-router-dom\";\r\nimport PaginaHome from '../paginas/PaginaHome/PaginaHome'\r\nimport { NotFound } from \"../paginas/NotFoundPage/NotFound\"\r\nimport { Pokedex } from '../paginas/PaginaPokedex/PaginaPokedex'\r\nimport PaginaDetalhes from '../paginas/PaginaDetalhes/PaginaDetalhes'\r\n\r\n\r\nexport const Router = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\n\r\n","import React, {useState} from \"react\";\r\nimport { GlobalContext } from \"./GlobalStateContext\";\r\n\r\nexport default function GlobalState(props){\r\n const [pokedex, setPokedex] = useState([])\r\n\r\nreturn (\r\n \r\n {props.children}\r\n \r\n)\r\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { exactProp } from '@material-ui/utils';\nimport ThemeContext from '../useTheme/ThemeContext';\nimport useTheme from '../useTheme';\nimport nested from './nested'; // To support composition of theme.\n\nfunction mergeOuterLocalTheme(outerTheme, localTheme) {\n if (typeof localTheme === 'function') {\n var mergedTheme = localTheme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production') {\n if (!mergedTheme) {\n console.error(['Material-UI: You should return an object from your theme function, i.e.', ' ({})} />'].join('\\n'));\n }\n }\n\n return mergedTheme;\n }\n\n return _extends({}, outerTheme, localTheme);\n}\n/**\n * This component takes a `theme` prop.\n * It makes the `theme` available down the React tree thanks to React context.\n * This component should preferably be used at **the root of your component tree**.\n */\n\n\nfunction ThemeProvider(props) {\n var children = props.children,\n localTheme = props.theme;\n var outerTheme = useTheme();\n\n if (process.env.NODE_ENV !== 'production') {\n if (outerTheme === null && typeof localTheme === 'function') {\n console.error(['Material-UI: You are providing a theme function prop to the ThemeProvider component:', ' outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\\n'));\n }\n }\n\n var theme = React.useMemo(function () {\n var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);\n\n if (output != null) {\n output[nested] = outerTheme !== null;\n }\n\n return output;\n }, [localTheme, outerTheme]);\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, children);\n}\n\nprocess.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node.isRequired,\n\n /**\n * A theme object. You can provide a function to extend the outer theme.\n */\n theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n process.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;\n}\n\nexport default ThemeProvider;","import { prymaryColor, secondaryColor } from './colors'\r\nimport { createMuiTheme } from '@material-ui/core'\r\n\r\nconst theme = createMuiTheme({\r\n status: {\r\n danger: '#e53e3e',\r\n },\r\n palette: {\r\n primary: {\r\n main: prymaryColor,\r\n contrastText: \"#FFFFFF\",\r\n },\r\n secondary: {\r\n main: secondaryColor,\r\n contrastText: \"#FFFFFF\"\r\n },\r\n },\r\n});\r\n\r\nexport default theme","import React from \"react\";\r\nimport { Router } from \"./routes/Routes\";\r\nimport GlobalState from \"./contexts/GlobalContext/GlobalState\";\r\nimport { ThemeProvider } from \"@material-ui/core/styles\";\r\nimport theme from \"./componentes/colors/theme\";\r\n\r\nfunction App() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from './App';\r\n\r\nReactDOM.render(\r\n React App
+
+
+
+
+
+
+
+
diff --git a/public/logo192.png b/public/logo192.png
new file mode 100644
index 0000000..fc44b0a
Binary files /dev/null and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
new file mode 100644
index 0000000..a4e47a6
Binary files /dev/null and b/public/logo512.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..080d6c7
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..3c51476
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { Router } from "./routes/Routes";
+import GlobalState from "./contexts/GlobalContext/GlobalState";
+import { ThemeProvider } from "@material-ui/core/styles";
+import theme from "./componentes/colors/theme";
+
+function App() {
+
+ return (
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/assets/error.jpg b/src/assets/error.jpg
new file mode 100644
index 0000000..cf9cf2c
Binary files /dev/null and b/src/assets/error.jpg differ
diff --git a/src/assets/pokeball.png b/src/assets/pokeball.png
new file mode 100644
index 0000000..fa3c5e3
Binary files /dev/null and b/src/assets/pokeball.png differ
diff --git a/src/componentes/CardPokedex/CardPokemon.js b/src/componentes/CardPokedex/CardPokemon.js
new file mode 100644
index 0000000..a670e0a
--- /dev/null
+++ b/src/componentes/CardPokedex/CardPokemon.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { goToDetails } from "../../routes/coordinatis";
+import { useHistory } from "react-router-dom";
+import { Card } from "./styled";
+
+const CardPokemon = (props) => {
+ const history = useHistory()
+ return (
+
+ 
+
+ )
+}
+
+export default CardPokemon
\ No newline at end of file
diff --git a/src/componentes/CardPokedex/styled.js b/src/componentes/CardPokedex/styled.js
new file mode 100644
index 0000000..e59404a
--- /dev/null
+++ b/src/componentes/CardPokedex/styled.js
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Card = styled.div`
+border: 1px solid black;
+width: 15vw;
+height: 25vh;
+text-align: center;
+margin: 10px;
+img{
+ width: 15vw;
+ height: 20vh;
+}
+button{
+ margin-right: 0.2vw;
+}
+`
\ No newline at end of file
diff --git a/src/componentes/Loading/Loading.js b/src/componentes/Loading/Loading.js
new file mode 100644
index 0000000..22989f7
--- /dev/null
+++ b/src/componentes/Loading/Loading.js
@@ -0,0 +1,24 @@
+import PacmanLoader from "react-spinners/PacmanLoader";
+import styled from "styled-components";
+import { prymaryColor } from "../colors/colors";
+
+const Container = styled.div`
+display: flex;
+justify-content: center;
+flex-direction: column;
+align-items: center;
+margin-top: 20%;
+`
+
+function Loading() {
+ return (
+
+
+ )
+}
+
+export default Loading;
\ No newline at end of file
diff --git a/src/componentes/colors/colors.js b/src/componentes/colors/colors.js
new file mode 100644
index 0000000..2a26d8b
--- /dev/null
+++ b/src/componentes/colors/colors.js
@@ -0,0 +1,2 @@
+export const prymaryColor = "#EE6055"
+export const secondaryColor = "#60D394"
\ No newline at end of file
diff --git a/src/componentes/colors/theme.js b/src/componentes/colors/theme.js
new file mode 100644
index 0000000..2bf0441
--- /dev/null
+++ b/src/componentes/colors/theme.js
@@ -0,0 +1,20 @@
+import { prymaryColor, secondaryColor } from './colors'
+import { createMuiTheme } from '@material-ui/core'
+
+const theme = createMuiTheme({
+ status: {
+ danger: '#e53e3e',
+ },
+ palette: {
+ primary: {
+ main: prymaryColor,
+ contrastText: "#FFFFFF",
+ },
+ secondary: {
+ main: secondaryColor,
+ contrastText: "#FFFFFF"
+ },
+ },
+});
+
+export default theme
\ No newline at end of file
diff --git a/src/componentes/url/url.js b/src/componentes/url/url.js
new file mode 100644
index 0000000..4b04f50
--- /dev/null
+++ b/src/componentes/url/url.js
@@ -0,0 +1 @@
+export const BASE_URL = "https://pokeapi.co/api/v2/"
\ No newline at end of file
diff --git a/src/const/theme.js b/src/const/theme.js
new file mode 100644
index 0000000..42ca03f
--- /dev/null
+++ b/src/const/theme.js
@@ -0,0 +1,16 @@
+import { createMuiTheme } from "@material-ui/core";
+
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ main: '#EE6055',
+ contrastText: '#fff',
+ },
+ secondary: {
+ main: '#60D394',
+ contrastText: '#000',
+ },
+ },
+});
+
+export default theme
\ No newline at end of file
diff --git a/src/contexts/GlobalContext/GlobalState.js b/src/contexts/GlobalContext/GlobalState.js
new file mode 100644
index 0000000..81264da
--- /dev/null
+++ b/src/contexts/GlobalContext/GlobalState.js
@@ -0,0 +1,12 @@
+import React, {useState} from "react";
+import { GlobalContext } from "./GlobalStateContext";
+
+export default function GlobalState(props){
+ const [pokedex, setPokedex] = useState([])
+
+return (
+
+ {props.children}
+
+)
+}
\ No newline at end of file
diff --git a/src/contexts/GlobalContext/GlobalStateContext.js b/src/contexts/GlobalContext/GlobalStateContext.js
new file mode 100644
index 0000000..5357b69
--- /dev/null
+++ b/src/contexts/GlobalContext/GlobalStateContext.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+export const GlobalContext = React.createContext()
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..272f33a
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+
+
+
+
+
+ {props.pokemon.name.toUpperCase()}
+
+
+ {mudaBotao ?
+
+
+ :
+ }
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/paginas/PaginaDetalhes/PaginaDetalhes.js b/src/paginas/PaginaDetalhes/PaginaDetalhes.js
new file mode 100644
index 0000000..d1a4cf1
--- /dev/null
+++ b/src/paginas/PaginaDetalhes/PaginaDetalhes.js
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import { fetchPokemon } from "../../request/request";
+import { useHistory } from "react-router-dom";
+import {
+ CartaoPokemonDetalhes,
+ CartaoPokemonStatus,
+ CartaoPokemonTipo,
+} from "./styled";
+import { Typography, CardMedia } from "@material-ui/core";
+import { ContainerHome } from "../PaginaHome/styled";
+import HeaderDetalhes from "./HeaderDetalhes";
+import { makeStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import CardContent from '@material-ui/core/CardContent';
+import CardActions from '@material-ui/core/CardActions';
+import Collapse from '@material-ui/core/Collapse';
+import IconButton from '@material-ui/core/IconButton';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Loading from "../../componentes/Loading/Loading";
+
+const PaginaDetalhes = ({ match }) => {
+
+ const [pokemon, setPokemon] = useState(undefined);
+ const [loading, setLoading] = useState(true);
+ const [expanded, setExpanded] = React.useState(false);
+ const history = useHistory();
+
+ const useStyles = makeStyles((theme) => ({
+ root: {
+ maxWidth: 345,
+ },
+ media: {
+ height: 0,
+ paddingTop: '56.25%', // 16:9
+ },
+ expand: {
+ transform: 'rotate(0deg)',
+ marginLeft: 'auto',
+ transition: theme.transitions.create('transform', {
+ duration: theme.transitions.duration.shortest,
+ }),
+ },
+ expandOpen: {
+ transform: 'rotate(180deg)',
+ },
+ }));
+
+ const classes = useStyles();
+
+ const handleExpandClick = () => {
+ setExpanded(!expanded);
+ };
+
+ useEffect(() => {
+ fetchPokemon(match.params.id).then((response) => {
+ setPokemon(response)
+ setLoading(false);
+ })
+ }, [match.params.id])
+
+ if (loading) {
+ return
+
+
+
+
+
+
+ Lista de Habilidades
+
+
+
+
+
+
+
+ {pokemon.moves.map((move, index) => {
+ if (index === 0) return
+
+
+
+
+ )
+};
+export default PaginaDetalhes
\ No newline at end of file
diff --git a/src/paginas/PaginaDetalhes/styled.js b/src/paginas/PaginaDetalhes/styled.js
new file mode 100644
index 0000000..9acf2c2
--- /dev/null
+++ b/src/paginas/PaginaDetalhes/styled.js
@@ -0,0 +1,88 @@
+import styled from "styled-components"
+import { AppBar, Card } from "@material-ui/core"
+
+export const HeaderPaginaDetalhes = styled(AppBar)`
+
+.display-botoes{
+ display: flex;
+ justify-content: space-between;
+
+}
+
+.botao-header{
+ background-color: #FF9B85;
+ color: white;
+}
+
+.botao-header:hover{
+ background-color: #FF9B85;
+}
+`
+
+export const HeaderContainer = styled(AppBar)`
+
+.toolbar{
+ justify-content: space-between;
+}
+
+.botao-header-detalhes{
+ background-color: #FF9B85;
+ color: white;
+}
+
+.botao-header-detalhes:hover{
+ background-color: #FF9B85;
+}
+
+`
+
+export const ContainerHome = styled.div`
+display: flex;
+flex-direction: column;
+align-content: flex-start;
+
+`
+
+export const CartaoPokemonDetalhes = styled(Card)`
+margin: 15px;
+border: 1px #FF9B85 solid;
+
+.menu{
+ justify-content: center;
+
+}
+
+img{
+ height: 200px;
+ width: 200px;
+}
+`
+
+export const CartaoPokemonStatus = styled(Card)`
+margin: 15px;
+border: 1px #FF9B85 solid;
+height: 300px;
+width: 200px;
+
+
+p{
+ padding: 3px
+}
+
+h6{
+ text-align: center;
+}
+
+`
+export const CartaoPokemonTipo = styled(Card)`
+margin: 15px;
+border: 1px #FF9B85 solid;
+height: 10vh;
+width: 193px;
+padding: 3px;
+
+h6{
+ text-align: center;
+}
+`
+
diff --git a/src/paginas/PaginaHome/PaginaHome.js b/src/paginas/PaginaHome/PaginaHome.js
new file mode 100644
index 0000000..826b5fb
--- /dev/null
+++ b/src/paginas/PaginaHome/PaginaHome.js
@@ -0,0 +1,86 @@
+import axios from "axios";
+import React, { useEffect, useState, useContext } from "react";
+import { GlobalContext } from "../../contexts/GlobalContext/GlobalStateContext";
+import { HeaderHome, CartaoPokemon, ContainerBotao, ContainerHome } from "./styled";
+import { goToDetails, goToPokedex } from "../../routes/coordinatis";
+import { useHistory } from "react-router-dom";
+import { BASE_URL } from "../../componentes/url/url";
+import { Button, CardMedia, Typography, Toolbar } from "@material-ui/core";
+import pokeball from "../../assets/pokeball.png"
+import { InfoOutlined } from "@material-ui/icons";
+import Loading from "../../componentes/Loading/Loading";
+
+const PaginaHome = () => {
+
+ const [pokemon, setPokemon] = useState([])
+ const [pokeUrl, setPokeUrl] = useState([])
+ const [pokedex, setPokedex] = useContext(GlobalContext)
+ const [disable, setDisable] = useState(false)
+ const history = useHistory()
+
+ // pegar os pokemons na api e setar o nome e a url nos estados
+ useEffect(() => {
+ axios.get(`${BASE_URL}pokemon`)
+ .then((res) => {
+ setPokemon(res.data.results.map(poke => poke.name))
+ setPokeUrl(res.data.results.map(poke => poke.url))
+ })
+ }, [])
+
+ const addPokedex = (pokeId) => {
+ alert('Pokémon adicionado com sucesso!')
+ setPokedex([...pokedex, pokeId]);
+ };
+
+
+ // mapeamento das imagens dos pokemons na tela principal
+ const mapPokeImg = pokeUrl.map(e => {
+ //mostrar a posição onde a string pokemon/ se encontra na url
+ // console.log(e.indexOf("pokemon/"), "indexOf")
+
+ //tirar as barras e só exibir o número do pokemon
+ // console.log(e.substring(26 + 8, e.length - 1))
+
+ //junção das duas numa só variável
+ const indexPokemon = e.substring(e.indexOf("pokemon/") + 8, e.length - 1)
+
+ return (
+
+
+
+
+
+
+ )
+ })
+
+ return (
+ <>
+
+
+
+
+ Pokémons
+
+
+
+
+ {pokeUrl.length > 0 ? <>{mapPokeImg} :
+
+ )
+}
+
+export default PaginaHome
+
+
diff --git a/src/paginas/PaginaHome/styled.js b/src/paginas/PaginaHome/styled.js
new file mode 100644
index 0000000..8a2a14c
--- /dev/null
+++ b/src/paginas/PaginaHome/styled.js
@@ -0,0 +1,47 @@
+import { CardActions, Card, AppBar } from "@material-ui/core";
+import styled from "styled-components";
+
+export const ContainerBotao = styled(CardActions)`
+display: flex;
+justify-content: center;
+
+.detalhes{
+ background-color: #EE6055;
+}
+
+.detalhes:hover{
+ background-color: #FF9B85;
+}
+
+.pokedex{
+ background-color: #60D394;
+}
+
+.pokedex:hover{
+ background-color: #AAF683;
+}
+`
+
+export const ContainerHome = styled.div`
+display: flex;
+flex-direction: row;
+flex-wrap: wrap;
+justify-content: space-around;
+`
+
+export const CartaoPokemon = styled(Card)`
+margin: 15px;
+border: 1px #FF9B85 solid;
+`
+
+export const HeaderHome = styled(AppBar)`
+.botao-header{
+ background-color: #FF9B85;
+ color: white;
+ margin-right: 40vw
+}
+
+.botao-header:hover{
+ background-color: #FF9B85;
+}
+`
\ No newline at end of file
diff --git a/src/paginas/PaginaPokedex/HeaderPokedex.js b/src/paginas/PaginaPokedex/HeaderPokedex.js
new file mode 100644
index 0000000..f87b6a6
--- /dev/null
+++ b/src/paginas/PaginaPokedex/HeaderPokedex.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { AppBar, Typography, Button, Toolbar } from '@material-ui/core'
+import { goToHome } from '../../routes/coordinatis';
+import { useHistory } from 'react-router-dom';
+import { HeaderHome } from './styled';
+
+export default function HeaderPokedex() {
+ const history = useHistory()
+
+ return (
+
+
+
+
+
+ Pokédex
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/paginas/PaginaPokedex/PaginaPokedex.js b/src/paginas/PaginaPokedex/PaginaPokedex.js
new file mode 100644
index 0000000..4e6e8a3
--- /dev/null
+++ b/src/paginas/PaginaPokedex/PaginaPokedex.js
@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import { goToDetails } from '../../routes/coordinatis';
+import { GlobalContext } from '../../contexts/GlobalContext/GlobalStateContext';
+import HeaderPokedex from './HeaderPokedex';
+import { CartaoPokemon, ContainerBotao, Container, ContainerVazio } from "./styled";
+import { Button } from "@material-ui/core";
+import { DeleteOutlined, InfoOutlined } from '@material-ui/icons'
+import Loading from '../../componentes/Loading/Loading';
+
+export function Pokedex() {
+ const history = useHistory()
+ const [pokedex, setPokedex] = useContext(GlobalContext)
+
+ const removerPokemon = (pokeId) => {
+ let remove = pokedex.filter((poke) => {
+ return pokeId !== poke
+ })
+ setPokedex(remove)
+ }
+
+ const mapPokemons = pokedex.map((poke, index) => {
+ return (
+
+
+
+
+
+
+ )
+ })
+
+ return (
+
+
+
+
+ )
+}
+
+
diff --git a/src/routes/coordinatis.js b/src/routes/coordinatis.js
new file mode 100644
index 0000000..93ef946
--- /dev/null
+++ b/src/routes/coordinatis.js
@@ -0,0 +1,15 @@
+export const goToPokedex = (history) => {
+ history.push("/pokedex")
+}
+
+export const goToDetails = (history, id) => {
+ history.push(`/pokemonDetails/${id}`)
+}
+
+export const goToHome = (history) => {
+ history.push("/")
+}
+
+export const goToReturn = (history) => {
+ history.goBack()
+}
\ No newline at end of file
\r\n
\r\n )\r\n}","import styled from \"styled-components\";\r\nimport { CardActions, Card, AppBar } from \"@material-ui/core\";\r\n\r\nexport const ContainerBotao = styled(CardActions)`\r\ndisplay: flex;\r\njustify-content: center;\r\n\r\n.detalhes{\r\n background-color: #EE6055;\r\n}\r\n\r\n.detalhes:hover{\r\n background-color: #FF9B85;\r\n}\r\n\r\n.pokedex{\r\n background-color: #60D394;\r\n}\r\n\r\n.pokedex:hover{\r\n background-color: #AAF683;\r\n}\r\n`\r\n\r\nexport const CartaoPokemon = styled(Card)`\r\nmargin: 15px;\r\nborder: 1px #FF9B85 solid;\r\np{\r\n text-align: center;\r\n}\r\n`\r\n\r\nexport const HeaderHome = styled(AppBar)`\r\ncolor: #EE6055;\r\n\r\n.botao-header{\r\n background-color: #FF9B85;\r\n color: white;\r\n margin-right: 35vw\r\n}\r\n\r\n.botao-header:hover{\r\n background-color: #FF9B85;\r\n}\r\n`\r\nexport const Container = styled.div`\r\ndisplay: flex;\r\nflex-wrap: wrap;\r\nspan{\r\n font-size: 1.5em;\r\n \r\n \r\n}\r\n}\r\n`\r\n\r\nexport const ContainerVazio = styled.div`\r\ndisplay: flex;\r\njustify-content: space-around;\r\nfont-size: 1.5em;\r\nmargin-top: 40vh;\r\n\r\n`","import React from 'react';\r\nimport { AppBar, Typography, Button, Toolbar } from '@material-ui/core'\r\nimport { goToHome } from '../../routes/coordinatis';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { HeaderHome } from './styled';\r\n\r\nexport default function HeaderPokedex() {\r\n const history = useHistory()\r\n\r\n return (\r\n 404 Page not found
\r\n\r\n 
\r\n
\r\n {mapPokemons} : Você ainda não possui nehum Pokémon adicionado a sua Pokédex 🙁 }\r\n
\r\n )\r\n}","function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {\n try {\n var info = gen[key](arg);\n var value = info.value;\n } catch (error) {\n reject(error);\n return;\n }\n\n if (info.done) {\n resolve(value);\n } else {\n Promise.resolve(value).then(_next, _throw);\n }\n}\n\nexport default function _asyncToGenerator(fn) {\n return function () {\n var self = this,\n args = arguments;\n return new Promise(function (resolve, reject) {\n var gen = fn.apply(self, args);\n\n function _next(value) {\n asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value);\n }\n\n function _throw(err) {\n asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err);\n }\n\n _next(undefined);\n });\n };\n}","import axios from \"axios\";\r\nimport { BASE_URL } from \"../componentes/url/url\";\r\n\r\n// Listar 30 pokemons disponíveis\r\nexport const pokemons = () => {\r\n axios.get(`${BASE_URL}/pokemon?limit=30&offset=200`).then((res) => {\r\n console.log(res.data)\r\n }).catch((error) => {\r\n alert(\"Erro\", error.response)\r\n })\r\n}\r\n// Descrição de um pokemon\r\nexport const pokemon = (id) => { // id do pokemon\r\n axios.get(`${BASE_URL}pokemon/${id}`).then((res) => {\r\n return res.data;\r\n }).catch((error) => {\r\n alert(\"Erro\", error.response)\r\n })\r\n}\r\n\r\nexport async function fetchPokemon(pokemonId) {\r\n const { data } = await axios.get(`${BASE_URL}pokemon/${pokemonId}`);\r\n return data;\r\n}\r\n\r\n \r\n","import styled from \"styled-components\"\r\nimport { AppBar, Card } from \"@material-ui/core\"\r\n\r\nexport const HeaderPaginaDetalhes = styled(AppBar)`\r\n\r\n.display-botoes{\r\n display: flex;\r\n justify-content: space-between;\r\n\r\n}\r\n\r\n.botao-header{\r\n background-color: #FF9B85;\r\n color: white;\r\n}\r\n\r\n.botao-header:hover{\r\n background-color: #FF9B85;\r\n}\r\n`\r\n\r\nexport const HeaderContainer = styled(AppBar)`\r\n\r\n.toolbar{\r\n justify-content: space-between;\r\n}\r\n\r\n.botao-header-detalhes{\r\n background-color: #FF9B85;\r\n color: white;\r\n}\r\n\r\n.botao-header-detalhes:hover{\r\n background-color: #FF9B85;\r\n}\r\n\r\n`\r\n\r\nexport const ContainerHome = styled.div`\r\ndisplay: flex;\r\nflex-direction: column;\r\nalign-content: flex-start;\r\n\r\n`\r\n\r\nexport const CartaoPokemonDetalhes = styled(Card)`\r\nmargin: 15px;\r\nborder: 1px #FF9B85 solid;\r\n\r\n.menu{\r\n justify-content: center;\r\n\r\n}\r\n\r\nimg{\r\n height: 200px;\r\n width: 200px;\r\n}\r\n`\r\n\r\nexport const CartaoPokemonStatus = styled(Card)`\r\nmargin: 15px;\r\nborder: 1px #FF9B85 solid;\r\nheight: 300px;\r\nwidth: 200px;\r\n\r\n\r\np{\r\n padding: 3px\r\n}\r\n\r\nh6{\r\n text-align: center;\r\n}\r\n\r\n`\r\nexport const CartaoPokemonTipo = styled(Card)`\r\nmargin: 15px;\r\nborder: 1px #FF9B85 solid;\r\nheight: 10vh;\r\nwidth: 193px;\r\npadding: 3px;\r\n\r\nh6{\r\n text-align: center;\r\n}\r\n`\r\n\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport { AppBar, Typography, Button, Toolbar } from '@material-ui/core'\r\nimport { goToHome } from '../../routes/coordinatis';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { HeaderPaginaDetalhes } from './styled';\r\nimport { GlobalContext } from '../../contexts/GlobalContext/GlobalStateContext';\r\n\r\n\r\nexport default function HeaderDetalhes(props) {\r\n const [pokedex, setPokedex] = useContext(GlobalContext)\r\n const history = useHistory()\r\n const [mudaHeader, setMudaHeader] = useState()\r\n\r\n useEffect(() => {\r\n\r\n }, [mudaHeader])\r\n\r\n const mudaBotao = pokedex.find(e => e === props.pokemon.id.toString())\r\n\r\n const adicionarERemoverPokemon = () => { \r\n if (!mudaBotao && pokedex !== props.pokemon.id){\r\n pokedex.push(props.pokemon.id.toString())\r\n setMudaHeader(1)\r\n } else {\r\n pokedex.splice(pokedex.indexOf(props.pokemon.id.toString()), 1)\r\n setMudaHeader(-1)\r\n }\r\n }\r\n\r\n return (\r\n \n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \r\n \r\n \r\n Status\r\n \r\n \r\n \r\n \r\n \r\n \r\n Tipo\r\n \r\n {pokemon.types.map((type) => {type.type.name} )}\r\n \r\n
\r\n HP: {pokemon.stats[0].base_stat}
\r\nAtaque: {pokemon.stats[1].base_stat}
\r\nDefesa: {pokemon.stats[2].base_stat}
\r\nAtaque Especial: {pokemon.stats[3].base_stat}
\r\nDefesa Especial: {pokemon.stats[4].base_stat}
\r\nVelocidade: {pokemon.stats[5].base_stat}
\r\n{move.move.name}
\r\n return {move.move.name}
\r\n })}\r\n
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/paginas/NotFoundPage/styled.js b/src/paginas/NotFoundPage/styled.js
new file mode 100644
index 0000000..5f3af63
--- /dev/null
+++ b/src/paginas/NotFoundPage/styled.js
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const ErrorImg = styled.img`
+
+width: 50vw;
+max-height: 60vh;
+
+`
+
diff --git a/src/paginas/PaginaDetalhes/HeaderDetalhes.js b/src/paginas/PaginaDetalhes/HeaderDetalhes.js
new file mode 100644
index 0000000..f5f50ce
--- /dev/null
+++ b/src/paginas/PaginaDetalhes/HeaderDetalhes.js
@@ -0,0 +1,64 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { AppBar, Typography, Button, Toolbar } from '@material-ui/core'
+import { goToHome } from '../../routes/coordinatis';
+import { useHistory } from 'react-router-dom';
+import { HeaderPaginaDetalhes } from './styled';
+import { GlobalContext } from '../../contexts/GlobalContext/GlobalStateContext';
+
+
+export default function HeaderDetalhes(props) {
+ const [pokedex, setPokedex] = useContext(GlobalContext)
+ const history = useHistory()
+ const [mudaHeader, setMudaHeader] = useState()
+
+ useEffect(() => {
+
+ }, [mudaHeader])
+
+ const mudaBotao = pokedex.find(e => e === props.pokemon.id.toString())
+
+ const adicionarERemoverPokemon = () => {
+ if (!mudaBotao && pokedex !== props.pokemon.id){
+ pokedex.push(props.pokemon.id.toString())
+ setMudaHeader(1)
+ } else {
+ pokedex.splice(pokedex.indexOf(props.pokemon.id.toString()), 1)
+ setMudaHeader(-1)
+ }
+ }
+
+ return (
+ 404 Page not found
+
+
+
+ Status
+
+
+
+
+
+
+ Tipo
+
+ {pokemon.types.map((type) => {type.type.name} )}
+
+
+ HP: {pokemon.stats[0].base_stat}
+Ataque: {pokemon.stats[1].base_stat}
+Defesa: {pokemon.stats[2].base_stat}
+Ataque Especial: {pokemon.stats[3].base_stat}
+Defesa Especial: {pokemon.stats[4].base_stat}
+Velocidade: {pokemon.stats[5].base_stat}
+{move.move.name}
+ return {move.move.name}
+ })}
+
+
+
+ {mapPokemons} : Você ainda não possui nehum Pokémon adicionado a sua Pokédex 🙁 }
+
+ )
+}
\ No newline at end of file
diff --git a/src/paginas/PaginaPokedex/styled.js b/src/paginas/PaginaPokedex/styled.js
new file mode 100644
index 0000000..6c714ab
--- /dev/null
+++ b/src/paginas/PaginaPokedex/styled.js
@@ -0,0 +1,63 @@
+import styled from "styled-components";
+import { CardActions, Card, AppBar } from "@material-ui/core";
+
+export const ContainerBotao = styled(CardActions)`
+display: flex;
+justify-content: center;
+
+.detalhes{
+ background-color: #EE6055;
+}
+
+.detalhes:hover{
+ background-color: #FF9B85;
+}
+
+.pokedex{
+ background-color: #60D394;
+}
+
+.pokedex:hover{
+ background-color: #AAF683;
+}
+`
+
+export const CartaoPokemon = styled(Card)`
+margin: 15px;
+border: 1px #FF9B85 solid;
+p{
+ text-align: center;
+}
+`
+
+export const HeaderHome = styled(AppBar)`
+color: #EE6055;
+
+.botao-header{
+ background-color: #FF9B85;
+ color: white;
+ margin-right: 35vw
+}
+
+.botao-header:hover{
+ background-color: #FF9B85;
+}
+`
+export const Container = styled.div`
+display: flex;
+flex-wrap: wrap;
+span{
+ font-size: 1.5em;
+
+
+}
+}
+`
+
+export const ContainerVazio = styled.div`
+display: flex;
+justify-content: space-around;
+font-size: 1.5em;
+margin-top: 40vh;
+
+`
\ No newline at end of file
diff --git a/src/request/request.js b/src/request/request.js
new file mode 100644
index 0000000..82b8517
--- /dev/null
+++ b/src/request/request.js
@@ -0,0 +1,26 @@
+import axios from "axios";
+import { BASE_URL } from "../componentes/url/url";
+
+// Listar 30 pokemons disponíveis
+export const pokemons = () => {
+ axios.get(`${BASE_URL}/pokemon?limit=30&offset=200`).then((res) => {
+ console.log(res.data)
+ }).catch((error) => {
+ alert("Erro", error.response)
+ })
+}
+// Descrição de um pokemon
+export const pokemon = (id) => { // id do pokemon
+ axios.get(`${BASE_URL}pokemon/${id}`).then((res) => {
+ return res.data;
+ }).catch((error) => {
+ alert("Erro", error.response)
+ })
+}
+
+export async function fetchPokemon(pokemonId) {
+ const { data } = await axios.get(`${BASE_URL}pokemon/${pokemonId}`);
+ return data;
+}
+
+
diff --git a/src/routes/Routes.js b/src/routes/Routes.js
new file mode 100644
index 0000000..5cfa3f4
--- /dev/null
+++ b/src/routes/Routes.js
@@ -0,0 +1,21 @@
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import PaginaHome from '../paginas/PaginaHome/PaginaHome'
+import { NotFound } from "../paginas/NotFoundPage/NotFound"
+import { Pokedex } from '../paginas/PaginaPokedex/PaginaPokedex'
+import PaginaDetalhes from '../paginas/PaginaDetalhes/PaginaDetalhes'
+
+
+export const Router = () => {
+ return (
+