7 | }
8 |
9 | export namespace LoadCharacterById {
10 | export interface Model {
11 | id: string
12 | cover: string
13 | name: string
14 | description: string
15 | comicsCount: number
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/presentation/components/header/components/menu-link/styles.ts:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components'
2 |
3 | export const Container = styled.a<{ active?: boolean }>`
4 | display: flex;
5 | align-items: center;
6 | cursor: pointer;
7 | opacity: 0.6;
8 |
9 | ${props => props.active && css`
10 | opacity: 1;
11 | `}
12 |
13 | :hover {
14 | opacity: 1;
15 | }
16 |
17 | > svg {
18 | margin-right: var(--space-xs);
19 | }
20 | `
21 |
--------------------------------------------------------------------------------
/src/presentation/utils/withSSGErrorHandler.tsx:
--------------------------------------------------------------------------------
1 | import { GetStaticProps, GetStaticPropsContext, GetStaticPropsResult } from 'next'
2 |
3 | export function withSSGErrorHandler (fn: GetStaticProps
) {
4 | return async (ctx: GetStaticPropsContext): Promise> => {
5 | try {
6 | return await fn(ctx)
7 | } catch (err) {
8 | console.error(err)
9 | return {
10 | notFound: true
11 | }
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/presentation/layouts/app-layouts/index.tsx:
--------------------------------------------------------------------------------
1 | import { Footer } from '../../components/footer'
2 | import { Header } from '../../components/header'
3 | import { PageWrapper } from './styles'
4 |
5 | interface AppLayoutProps {
6 | children: React.ReactNode
7 | }
8 |
9 | export function AppLayout ({ children }: AppLayoutProps): React.ReactElement {
10 | return (
11 | <>
12 |
13 |
14 | {children}
15 |
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/domain/usecases/load-comic-by-id.ts:
--------------------------------------------------------------------------------
1 | export interface LoadComicByIdDTO {
2 | id: string
3 | }
4 |
5 | export interface LoadComicById {
6 | execute: (params?: LoadComicByIdDTO) => Promise
7 | }
8 |
9 | export namespace LoadComicById {
10 | export interface Model {
11 | id: number
12 | title: string
13 | cover: string
14 | publishedAt: string
15 | writer: string
16 | penciler: string
17 | coverArtist: string
18 | description: string
19 | comics: this[]
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/domain/usecases/load-characters.ts:
--------------------------------------------------------------------------------
1 | export interface LoadCharactersListDTO {
2 | titleStartsWith?: number
3 | limit?: number
4 | offset?: number
5 | orderBy?: string
6 | }
7 |
8 | export interface LoadCharactersList {
9 | execute: (params?: LoadCharactersListDTO) => Promise
10 | }
11 |
12 | export namespace LoadCharactersList {
13 | export interface Model {
14 | id: string
15 | cover: string
16 | name: string
17 | description: string
18 | comicsCount: number
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "standard-with-typescript",
3 | "env": {
4 | "node": true,
5 | "es6": true,
6 | "jest": true
7 | },
8 | "parserOptions": {
9 | "project": "./tsconfig.json"
10 | },
11 | "rules": {
12 | "@typescript-eslint/consistent-type-assertions": "off",
13 | "@typescript-eslint/strict-boolean-expressions": "off",
14 | "@typescript-eslint/restrict-template-expressions": "off",
15 | "@typescript-eslint/restrict-plus-operands": "off",
16 | "@typescript-eslint/no-namespace": "off"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/presentation/components/footer/index.tsx:
--------------------------------------------------------------------------------
1 | import { FiGithub } from 'react-icons/fi'
2 | import { Wrapper } from '../wrapper'
3 | import { Container } from './styles'
4 |
5 | export function Footer (): React.ReactElement {
6 | return (
7 |
8 |
9 | By @felipebarcelospro
10 |
11 |
12 |
13 | Open on Github
14 |
15 |
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
36 | # tests
37 | coverage
38 |
39 | # env
40 | .env
41 |
--------------------------------------------------------------------------------
/src/domain/usecases/load-comics.ts:
--------------------------------------------------------------------------------
1 | export interface LoadComicsListDTO {
2 | titleStartsWith?: number
3 | limit?: number
4 | offset?: number
5 | orderBy?: string
6 | dateRange?: string
7 | characters?: string
8 | }
9 |
10 | export interface LoadComicsList {
11 | execute: (params?: LoadComicsListDTO) => Promise
12 | }
13 |
14 | export namespace LoadComicsList {
15 | export interface Model {
16 | id: number
17 | title: string
18 | cover: string
19 | publishedAt: string
20 | writer: string
21 | penciler: string
22 | coverArtist: string
23 | description: string
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/presentation/components/share/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.div`
4 | display: flex;
5 | align-items: center;
6 |
7 | @media (max-width: 800px) {
8 | flex-direction: column;
9 |
10 | > button {
11 | width: 100%;
12 | margin: 0!important;
13 | margin-bottom: var(--space-sm)!important;
14 | }
15 | }
16 |
17 | h1 {
18 | font-size: var(--size-xs);
19 | text-transform: uppercase;
20 | opacity: 0.4;
21 | margin-right: var(--space-xs);
22 | }
23 |
24 | > button:not(:last-child) {
25 | margin-right: var(--space-sm);
26 | }
27 | `
28 |
--------------------------------------------------------------------------------
/src/data/protocols/http/http-client.ts:
--------------------------------------------------------------------------------
1 | export interface HttpRequest {
2 | url: string
3 | method: HttpMethod
4 | body?: any
5 | headers?: any
6 | params?: any
7 | }
8 |
9 | export interface HttpClient {
10 | request: (data: HttpRequest) => Promise>
11 | }
12 |
13 | export type HttpMethod = 'post' | 'get' | 'put' | 'delete'
14 |
15 | export enum HttpStatusCode {
16 | ok = 200,
17 | noContent = 204,
18 | badRequest = 400,
19 | unauthorized = 401,
20 | forbidden = 403,
21 | notFound = 404,
22 | serverError = 500
23 | }
24 |
25 | export interface HttpResponse {
26 | statusCode: HttpStatusCode
27 | body?: T
28 | }
29 |
--------------------------------------------------------------------------------
/src/presentation/components/character-list/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.section`
4 | padding: var(--space-xl) 0;
5 |
6 | > h1 {
7 | font-size: var(--size-xs);
8 | text-transform: uppercase;
9 | opacity: 0.4;
10 | margin-bottom: var(--space-sm);
11 | }
12 | `
13 |
14 | export const Grid = styled.section`
15 | display: grid;
16 | grid-template-columns: repeat(5, 1fr);
17 | grid-gap: var(--space-sm);
18 |
19 | @media (max-width: 1200px) {
20 | grid-template-columns: repeat(4, 1fr);
21 | }
22 |
23 | @media (max-width: 800px) {
24 | padding-bottom: var(--space-md);
25 | }
26 | `
27 |
--------------------------------------------------------------------------------
/src/presentation/components/comic-list/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.section`
4 | padding: var(--space-xl) 0;
5 |
6 | > h1 {
7 | font-size: var(--size-xs);
8 | text-transform: uppercase;
9 | opacity: 0.4;
10 | margin-bottom: var(--space-sm);
11 | }
12 | `
13 |
14 | export const Grid = styled.section`
15 | display: grid;
16 | grid-template-columns: repeat(5, 1fr);
17 | grid-gap: var(--space-sm);
18 |
19 | @media (max-width: 1200px) {
20 | grid-template-columns: repeat(4, 1fr);
21 | }
22 |
23 | @media (max-width: 800px) {
24 | padding-bottom: var(--space-md);
25 | }
26 | `
27 |
--------------------------------------------------------------------------------
/src/presentation/components/header/components/avatar/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { Container } from './styles'
4 |
5 | interface Name {
6 | firstName: string
7 | lastName: string
8 | }
9 |
10 | interface AvatarProps {
11 | name: Name
12 | }
13 |
14 | export function Avatar ({ name }: AvatarProps): React.ReactElement {
15 | const [initials, setInitials] = React.useState('')
16 |
17 | React.useEffect(() => {
18 | const { firstName, lastName } = name
19 | const initials = `${firstName[0]}${lastName[0]}`
20 | setInitials(initials)
21 | }, [name])
22 |
23 | return (
24 |
25 | {initials}
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": false,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "incremental": true,
15 | "esModuleInterop": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "jsx": "preserve"
21 | },
22 | "include": [
23 | "next-env.d.ts",
24 | "**/*.ts",
25 | "**/*.tsx"
26 | , "pages/_document.js" ],
27 | "exclude": [
28 | "node_modules"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/src/presentation/components/header/components/menu-link/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import NextLink from 'next/link'
3 |
4 | import { Container } from './styles'
5 | import { useRouter } from 'next/router'
6 |
7 | interface MenuLinkProps {
8 | children: React.ReactNode
9 | icon: React.ReactNode
10 | path: string
11 | exact?: boolean
12 | }
13 |
14 | export function MenuLink ({ icon, children, path, exact }: MenuLinkProps): React.ReactElement {
15 | const router = useRouter()
16 |
17 | return (
18 |
19 |
20 | {icon}
21 | {children}
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/presentation/components/banner/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import NextImage from 'next/image'
3 | import NextLink from 'next/link'
4 |
5 | import { Container, Overlay } from './styles'
6 |
7 | interface BannerProps {
8 | src: string
9 | title: string
10 | createdAt: string
11 | href: string
12 | }
13 |
14 | export function Banner ({ src, title, createdAt, href }: BannerProps): React.ReactElement {
15 | return (
16 |
17 |
18 |
19 |
20 |
21 | {title}
22 | Released at {createdAt}
23 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/presentation/components/header/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.header`
4 | background: var(--color-bg-accent);
5 | border-bottom: 1px solid var(--color-border);
6 |
7 | > div {
8 | display: flex;
9 | justify-content: space-between;
10 | align-items: center;
11 |
12 | min-height: 90px;
13 |
14 | .header-logo {
15 | opacity: 1;
16 | transition: opacity 0.3s ease-in-out;
17 | cursor: pointer;
18 |
19 | :hover {
20 | opacity: 0.6;
21 | }
22 | }
23 | }
24 | `
25 |
26 | export const Menu = styled.nav`
27 | display: flex;
28 | align-items: center;
29 |
30 | > a:not(:last-child) {
31 | margin-right: var(--space-md);
32 | }
33 | `
34 |
--------------------------------------------------------------------------------
/src/presentation/components/comic-list/components/comic-list-item/index.tsx:
--------------------------------------------------------------------------------
1 | import NextImage from 'next/image'
2 | import NextLink from 'next/link'
3 |
4 | import { ComicModel } from '../../../../../domain/models/comic'
5 | import { Container } from './styles'
6 |
7 | interface ComicListItemProps {
8 | data: ComicModel
9 | }
10 |
11 | export function ComicListItem ({ data }: ComicListItemProps): React.ReactElement {
12 | const { id, cover, title, writer } = data
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
{title}
21 | By {writer}
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/presentation/components/header/index.tsx:
--------------------------------------------------------------------------------
1 | import NextImage from 'next/image'
2 | import NextLink from 'next/link'
3 |
4 | import { Wrapper } from '../wrapper'
5 | import { MenuLink } from './components/menu-link'
6 | import { Container, Menu } from './styles'
7 | import { FiHome } from 'react-icons/fi'
8 |
9 | export function Header (): React.ReactElement {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/presentation/components/search-input/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.div`
4 | display: flex;
5 | align-items: center;
6 | height: var(--size-lg);
7 | border: 2px solid var(--color-border);
8 | border-radius: var(--radius-base);
9 | background: #222534;
10 | padding: 0 var(--space-xs);
11 |
12 | svg {
13 | opacity: 0.4;
14 | margin-right: var(--space-xs);
15 | }
16 |
17 | input {
18 | width: 100%;
19 | height: 100%;
20 | background: transparent;
21 | font-size: var(--font-size-lg);
22 | color: white;
23 | border: 0;
24 |
25 | :focus {
26 | outline: 0;
27 | box-shadow: none;
28 | }
29 |
30 | ::placeholder {
31 | color: white;
32 | opacity: 0.4;
33 | }
34 | }
35 | `
36 |
--------------------------------------------------------------------------------
/src/presentation/components/character-list/components/character-list-item/index.tsx:
--------------------------------------------------------------------------------
1 | import NextLink from 'next/link'
2 | import { CharacterModel } from '../../../../../domain/models/character'
3 |
4 | import { Container } from './styles'
5 |
6 | interface CharacterListItemProps {
7 | data: CharacterModel
8 | }
9 |
10 | export function CharacterListItem ({ data }: CharacterListItemProps): React.ReactElement {
11 | const { id, cover, name, comicsCount } = data
12 |
13 | return (
14 |
15 |
16 |
17 |
18 |
20 |
{name}
21 | {comicsCount} comics
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 | A hub of all Marvel comics featuring your favorite heroes created with NextJS.
5 | [marvel-hub.vercel.app](https://marvel-hub.vercel.app)
6 |
7 | 
8 |
9 | ## Stack
10 |
11 | **Front-end:** NextJs, Jest, Styled Components
12 |
13 |
14 | ## Run in Locally
15 |
16 | Install *Marvel Hub* with yarn
17 |
18 | ```bash
19 | git clone https://github.com/felipebarcelospro/marvel-hub.git
20 | cd marvel-hub
21 | yarn && yarn dev
22 | ```
23 |
24 | ## Run Tests
25 |
26 | To run the tests, run the following command
27 |
28 | ```bash
29 | yarn test
30 | ```
31 |
32 |
33 | ## Support
34 |
35 | For support, send an email to felipebarcelospro@gmail.com.
36 |
37 | ## Licença
38 |
39 | [MIT](https://choosealicense.com/licenses/mit/)
40 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Marvel Hub",
3 | "icons": [
4 | {
5 | "src": "\/android-icon-36x36.png",
6 | "sizes": "36x36",
7 | "type": "image\/png",
8 | "density": "0.75"
9 | },
10 | {
11 | "src": "\/android-icon-48x48.png",
12 | "sizes": "48x48",
13 | "type": "image\/png",
14 | "density": "1.0"
15 | },
16 | {
17 | "src": "\/android-icon-72x72.png",
18 | "sizes": "72x72",
19 | "type": "image\/png",
20 | "density": "1.5"
21 | },
22 | {
23 | "src": "\/android-icon-96x96.png",
24 | "sizes": "96x96",
25 | "type": "image\/png",
26 | "density": "2.0"
27 | },
28 | {
29 | "src": "\/android-icon-144x144.png",
30 | "sizes": "144x144",
31 | "type": "image\/png",
32 | "density": "3.0"
33 | },
34 | {
35 | "src": "\/android-icon-192x192.png",
36 | "sizes": "192x192",
37 | "type": "image\/png",
38 | "density": "4.0"
39 | }
40 | ]
41 | }
--------------------------------------------------------------------------------
/src/presentation/components/comic-list/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { ComicModel } from '../../../domain/models/comic'
4 | import { ComicListItem } from './components/comic-list-item'
5 | import { Container, Grid } from './styles'
6 |
7 | interface ComicListProps {
8 | title: string
9 | data: ComicModel[]
10 | }
11 |
12 | export function ComicList ({ title, data }: ComicListProps): React.ReactElement {
13 | if (!data || data.length === 0) return <>
14 |
15 | return (
16 |
17 | {title}
18 |
19 | {data.length > 0 && (
20 |
21 | {data.map((data, index) => (
22 |
23 | ))}
24 |
25 | )}
26 |
27 | {data.length === 0 && (
28 | No comics found
29 | )}
30 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/presentation/components/character-list/index.tsx:
--------------------------------------------------------------------------------
1 | import { CharacterModel } from '../../../domain/models/character'
2 | import { CharacterListItem } from './components/character-list-item'
3 | import { Container, Grid } from './styles'
4 |
5 | interface CharacterListProps {
6 | title: string
7 | data: CharacterModel[]
8 | }
9 |
10 | export function CharacterList ({ title, data }: CharacterListProps): React.ReactElement {
11 | if (!data || data.length === 0) return <>
12 |
13 | return (
14 |
15 | {title}
16 |
17 | {data.length > 0 && (
18 |
19 | {data.map((character, index) => (
20 |
21 | ))}
22 |
23 | )}
24 |
25 | {data.length === 0 && (
26 | No comics found
27 | )}
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/main/factories/http/mock-http-client.ts:
--------------------------------------------------------------------------------
1 | import faker from 'faker'
2 |
3 | import { HttpRequest, HttpClient, HttpResponse, HttpStatusCode } from '../../../data/protocols/http/http-client'
4 |
5 | export const mockHttpRequest = (): HttpRequest => ({
6 | url: faker.internet.url(),
7 | method: faker.random.arrayElement(['get', 'post', 'put', 'delete']),
8 | body: faker.random.objectElement(),
9 | headers: faker.random.objectElement()
10 | })
11 |
12 | export class HttpClientSpy implements HttpClient {
13 | url?: string
14 | method?: string
15 | body?: any
16 | headers?: any
17 | params?: any
18 | response: HttpResponse = {
19 | statusCode: HttpStatusCode.ok
20 | }
21 |
22 | async request (data: HttpRequest): Promise> {
23 | this.url = data.url
24 | this.method = data.method
25 | this.body = data.body
26 | this.headers = data.headers
27 | this.params = data.params
28 |
29 | return this.response
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/presentation/components/banner/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.section`
4 | margin-top: var(--space-xl);
5 | margin-bottom: var(--space-xl);
6 |
7 | position: relative;
8 | height: 24rem;
9 | background: var(--color-bg-accent);
10 | border: 3px solid var(--color-border);
11 | border-radius: var(--radius-base);
12 | overflow: hidden;
13 | box-shadow: var(--shadow);
14 | transition: all 0.3s ease-in-out;
15 | cursor: pointer;
16 |
17 | @media (max-width: 800px) {
18 | height: 20rem;
19 | }
20 |
21 | @media (min-width: 800px) {
22 | :hover {
23 | border-color: var(--color-white);
24 | box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px, rgb(0 0 0 / 72%) 0px 30px 22px -10px;
25 | }
26 | }
27 |
28 | > span {
29 | position: absolute;
30 | }
31 | `
32 |
33 | export const Overlay = styled.div`
34 | position: absolute;
35 | padding-left: var(--space-xl);
36 | padding-bottom: var(--space-lg);
37 | bottom: 0;
38 |
39 | h1, h2 {
40 | font-size: var(--size-xs);
41 | }
42 |
43 | h1 {
44 | line-height: 120%;
45 | }
46 |
47 | h2 {
48 | opacity: 0.6;
49 | font-weight: 400;
50 | }
51 | `
52 |
--------------------------------------------------------------------------------
/src/presentation/components/comic-list/components/comic-list-item/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.article`
4 | background: linear-gradient(rgb(48, 50, 62), rgb(30, 31, 42));
5 | border: 3px solid #3a3c48;
6 | border-radius: var(--radius-base);
7 | box-shadow: var(--shadow);
8 | cursor: pointer;
9 | transition: all 0.3s ease-in-out;
10 | overflow: hidden;
11 |
12 | @media (max-width: 800px) {
13 | min-width: 22rem;
14 | }
15 |
16 | @media (min-width: 800px) {
17 | :hover {
18 | border-color: var(--color-white);
19 | box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px, rgb(0 0 0 / 72%) 0px 30px 22px -10px;
20 | transform: scale(1.03);
21 | }
22 | }
23 |
24 | img {
25 | width: 100%;
26 | }
27 |
28 | .info {
29 | border-top: 1px solid #3a3c48;
30 | padding: 1rem;
31 | margin-top: -6px;
32 |
33 | h1, h2 {
34 | font-size: var(--font-size-md);
35 | line-height: 120%;
36 | }
37 |
38 | h1 {
39 | margin-bottom: var(--space-xs);
40 | }
41 |
42 | h2 {
43 | opacity: 0.6;
44 |
45 | font-weight: 400;
46 | font-size: var(--font-size-sm);
47 | }
48 | }
49 | `
50 |
--------------------------------------------------------------------------------
/src/presentation/pages/error/index.tsx:
--------------------------------------------------------------------------------
1 | import NextImage from 'next/image'
2 | import NextLink from 'next/link'
3 |
4 | import NextHead from 'next/head'
5 |
6 | import { Wrapper } from '../../components/wrapper'
7 | import { AppLayout } from '../../layouts/app-layouts'
8 | import { Container } from './styles'
9 |
10 | export function ErrorPage (): React.ReactElement {
11 | return (
12 | <>
13 |
14 | MarvelHub - Error 404
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
404...
25 |
26 |
STATION ANSWERS:
27 |
I think you've reached the edge of the universe. The page you requested was not found.
28 |
29 |
30 | Back to the front page
31 |
32 |
36 |
{name}
37 |
38 | {description && (
39 | <>
40 |
41 |
42 |
43 |
Description:
44 |
{description}
45 |
46 |
47 |
48 |
49 | )}
50 |
51 |
52 |
33 |
{comic.title}
34 |
35 |
36 |
Published:
37 | {comic.publishedAt}
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
Writer:
46 | {comic.writer}
47 |
48 |
49 |
50 |
51 |
52 |
Penciler:
53 | {comic.penciler}
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
Cover Artist:
62 | {comic.coverArtist}
63 |
64 |
65 | {comic.description && (
66 | <>
67 |
68 |
69 |
70 |
Description:
71 |
{comic.description}
72 |
73 |
74 | )}
75 |
76 |
77 |
78 |
79 |