\n \n )\n}\n\nexport default CharacterPlaceholder\n"
},
{
"path": "src/character.js",
"content": "\nimport React, { useState, useEffect } from 'react'\nimport styled from 'styled-components'\nimport CharacterName from './character-name'\nimport CharacterImage from './character-image'\nimport CharacterDescription from './character-description'\nimport CharacterPlaceholder from './character-placeholder'\nimport Layout from './layout'\nimport api from './api'\nimport Next from './next'\nimport CharacterContext from './character-context'\n\n\nconst CharacterStyled = styled.div`\n\n`\n\nfunction Character({ match }) {\n const [character, setCharacter] = useState({})\n useEffect(() => {\n async function getCharacter() {\n setCharacter(await api.getCharacter(match.params.id || 1))\n }\n getCharacter()\n }, [match.params.id])\n return (\n \n \n \n }\n name={}\n image={}\n description={}\n />\n \n \n );\n}\n\nexport default Character\n"
},
{
"path": "src/dot.js",
"content": "import React from 'react'\nimport styled from 'styled-components'\n\nconst DotStyled = styled.span`\n width: 10px;\n height: 10px;\n background: black;\n border-radius: 50%;\n display: inline-flex;\n margin-inline: 5px;\n`\n\nfunction Dot() {\n return (\n \n )\n}\n\nexport default Dot\n"
},
{
"path": "src/global-styles.js",
"content": "import { createGlobalStyle } from 'styled-components'\n\nconst GlobalStyle = createGlobalStyle`\n body {\n margin: 0;\n background: #00a5be;\n font-family: system-ui;\n overflow-x: hidden;\n background-image: url('./images/asset-red.svg');\n background-position: left 200px top;\n background-repeat: no-repeat;\n }\n\n\n @media screen and (max-width: 1024px) {\n body {\n background-position: left 50px top;\n }\n\n }\n`\n\nexport default GlobalStyle\n\n"
},
{
"path": "src/index.css",
"content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n"
},
{
"path": "src/index.js",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"
},
{
"path": "src/layout.js",
"content": "import React from 'react'\nimport styled from 'styled-components'\nimport Social from './social'\nimport Logo from './logo'\nimport Dot from './dot'\nimport Line from './line'\nimport LearnMore from './learn-more'\nimport NavigationItem from './navigation-item'\n\nconst LayoutStyled = styled.div`\n position: relative;\n z-index: 2;\n display: grid;\n height: calc(100vh - 8em);\n padding: 4em;\n grid-column-gap: 8em;\n grid-template-columns: 50px 1fr 1fr 200px;\n grid-template-rows: 230px 100px 1fr 1fr 1fr;\n grid-template-areas: \"asset-top logo logo social\" \"name character-name avatar avatar\" \"about character-description avatar avatar\" \"asset-bottom character-text avatar avatar\" \"asset-bottom learn-more arrow other-line\" ;\n\n .name-area {\n /* border: 1px solid blue; */\n display: flex;\n align-items: center;\n grid-area: character-name;\n /* padding-inline-start: 1em; */\n }\n .description-area {\n grid-area: character-description;\n }\n .image-area {\n grid-area: avatar;\n /* border: 1px solid red; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .next-area {\n grid-area: arrow;\n display: flex;\n }\n\n .social-area {\n grid-area: social;\n }\n .logo-area {\n grid-area: logo;\n }\n .learn-more-area {\n grid-area: learn-more;\n }\n .vertical-align {\n writing-mode: vertical-rl;\n display: flex;\n align-items: center;\n }\n .asset-top-area {\n grid-area: asset-top;\n }\n .asset-bottom-area {\n grid-area: asset-bottom;\n /* border: 1px solid green; */\n justify-content: flex-end;\n }\n\n .navigation-area {\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n display: flex;\n align-items: center;\n justify-content: center;\n &.name {\n grid-area: name;\n }\n &.about {\n grid-area: about;\n }\n }\n\n @media screen and (max-width: 1440px) {\n column-gap: 2em;\n }\n @media screen and (max-width: 1024px) {\n height: auto;\n padding: 2em 0;\n width: calc(100vw - 2em);\n margin: 0 auto;\n column-gap: 1em;\n grid-template-columns: 50px 1fr 1fr;\n grid-template-rows: repeat(6, auto);\n grid-template-areas: \"logo logo logo\" \"name avatar avatar\" \"name character-name character-name\" \"about character-description character-description\" \"arrow arrow arrow\" \"social social social\";\n .name-area {\n margin-top: 1em;\n justify-content: center;\n }\n .social-area {\n text-align: center;\n margin-top: 2em;\n }\n .vertical-align {\n display:none;\n }\n .learn-more-area {\n display: none;\n }\n }\n\n`\n\nfunction Layout({ name, image, description, next }) {\n return (\n \n \n \n \n \n \n \n
\n \n
\n
\n \n
\n
\n \n\n
\n
\n {name}\n
\n
\n {image}\n
\n\n
\n \n
\n
\n {description}\n
\n\n \n \n \n \n \n \n \n
\n \n
\n
\n {next}\n
\n \n )\n}\n\nexport default Layout\n"
},
{
"path": "src/learn-more.js",
"content": "import React from 'react'\nimport styled from 'styled-components'\n\nconst LearnMoreStyled = styled.p`\n display: flex;\n align-items: flex-end;\n font-size: 25px;\n text-transform: uppercase;\n background-image: url('./images/learn-more.svg');\n background-repeat: no-repeat;\n background-position: left 170px bottom 5px;\n`\n\nfunction LearnMore() {\n return (\n \n Learn More\n \n )\n}\n\nexport default LearnMore\n"
},
{
"path": "src/line.js",
"content": "import React from 'react'\nimport styled from 'styled-components'\n\nconst LineStyled = styled.span`\n width: 2px;\n height: 150px;\n background: black;\n display: inline-flex;\n margin-inline: 15px;\n`\n\nfunction Line() {\n return (\n \n )\n}\n\nexport default Line\n"
},
{
"path": "src/logo.js",
"content": "import React from 'react'\nimport styled from 'styled-components'\n\nconst LogoStyled = styled.img`\n margin: 0 auto 2em;\n display: block;\n @media screen and (max-width: 1024px) {\n max-width: 100%;\n }\n`\n\nfunction Logo() {\n return (\n \n )\n}\n\nexport default Logo\n"
},
{
"path": "src/navigation-item.js",
"content": "import React from 'react'\nimport styled from 'styled-components'\n\nconst NavigationItemStyled = styled.a`\n text-decoration: none;\n color: black;\n font-size: 25px;\n text-transform: uppercase;\n`\n\nfunction NavigationItem({ url, text }) {\n return (\n \n {text}\n \n )\n}\n\nexport default NavigationItem\n"
},
{
"path": "src/next.js",
"content": "import React, { useContext } from 'react'\nimport styled from 'styled-components'\nimport CharacterContext from './character-context'\n// import api from './api'\nimport NProgress from 'nprogress'\nimport { useHistory } from 'react-router-dom'\n\n\nconst NextStyled = styled.div`\n cursor: pointer;\n /* border: 1px solid red; */\n background-image: url('./images/arrow.svg');\n background-repeat: no-repeat;\n background-position: left bottom;\n flex: 1;\n @media screen and (max-width: 1024px) {\n user-select: none;\n height: 50px;\n background-position: center;\n }\n`\n\nfunction Next() {\n const context = useContext(CharacterContext)\n const history = useHistory()\n async function handleClick() {\n NProgress.start()\n history.push(`${process.env.PUBLIC_URL}/${context.character.id + 1}`)\n // context.setCharacter(await api.getCharacter(context.character.id + 1))\n NProgress.done()\n }\n return (\n \n\n )\n}\n\nexport default Next\n"
},
{
"path": "src/nprogress.css",
"content": "/* Make clicks pass-through */\n#nprogress {\n pointer-events: none;\n}\n\n#nprogress .bar {\n background: #f7391c;\n\n position: fixed;\n z-index: 1031;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 2px;\n}\n\n/* Fancy blur effect */\n#nprogress .peg {\n display: block;\n position: absolute;\n right: 0px;\n width: 100px;\n height: 100%;\n box-shadow: 0 0 10px #f7391c, 0 0 5px #f7391c;\n opacity: 1.0;\n\n -webkit-transform: rotate(3deg) translate(0px, -4px);\n -ms-transform: rotate(3deg) translate(0px, -4px);\n transform: rotate(3deg) translate(0px, -4px);\n}\n\n/* Remove these to get rid of the spinner */\n#nprogress .spinner {\n display: block;\n position: fixed;\n z-index: 1031;\n top: 15px;\n right: 15px;\n}\n\n#nprogress .spinner-icon {\n width: 18px;\n height: 18px;\n box-sizing: border-box;\n\n border: solid 2px transparent;\n border-top-color: #f7391c;\n border-left-color: #f7391c;\n border-radius: 50%;\n\n -webkit-animation: nprogress-spinner 400ms linear infinite;\n animation: nprogress-spinner 400ms linear infinite;\n}\n\n.nprogress-custom-parent {\n overflow: hidden;\n position: relative;\n}\n\n.nprogress-custom-parent #nprogress .spinner,\n.nprogress-custom-parent #nprogress .bar {\n position: absolute;\n}\n\n@-webkit-keyframes nprogress-spinner {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n}\n@keyframes nprogress-spinner {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n"
},
{
"path": "src/serviceWorker.js",
"content": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n"
},
{
"path": "src/setupTests.js",
"content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom/extend-expect';\n"
},
{
"path": "src/social.js",
"content": "import React from 'react'\nimport styled from 'styled-components'\n\nconst SocialStyled = styled.div`\n a {\n text-decoration: none;\n }\n @media screen and (max-width: 1024px) {\n a {\n margin-left: 2em;\n }\n a:first-child {\n margin-left: 0;\n }\n }\n`\n\nfunction Social() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Social\n"
}
]
![\"\"](\"./images/instagram.svg\")
\n \n \n ![\"\"](\"./images/facebook.svg\")
\n \n \n ![\"\"](\"./images/twitter.svg\")
\n \n