diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/fonts/GeistMonoVF.woff b/app/fonts/GeistMonoVF.woff deleted file mode 100644 index f2ae185..0000000 Binary files a/app/fonts/GeistMonoVF.woff and /dev/null differ diff --git a/app/fonts/GeistVF.woff b/app/fonts/GeistVF.woff deleted file mode 100644 index 1b62daa..0000000 Binary files a/app/fonts/GeistVF.woff and /dev/null differ diff --git a/app/globals.css b/app/globals.css deleted file mode 100644 index 13d40b8..0000000 --- a/app/globals.css +++ /dev/null @@ -1,27 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } -} diff --git a/app/layout.tsx b/app/layout.tsx deleted file mode 100644 index a36cde0..0000000 --- a/app/layout.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { Metadata } from "next"; -import localFont from "next/font/local"; -import "./globals.css"; - -const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", - weight: "100 900", -}); -const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", - weight: "100 900", -}); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - {children} - - - ); -} diff --git a/app/page.tsx b/app/page.tsx deleted file mode 100644 index 433c8aa..0000000 --- a/app/page.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import Image from "next/image"; - -export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
- ); -} diff --git a/components/Card/index.tsx b/components/Card/index.tsx new file mode 100644 index 0000000..b6d0ebf --- /dev/null +++ b/components/Card/index.tsx @@ -0,0 +1,44 @@ +import React, { FC } from "react" +import Image from "next/image" +import { pokenmonTypes } from "@/types/pokemons" + +export interface CardProps { + name: string + image: string + hp: number + height: number + weight: number + type: pokenmonTypes[] +} + +export const Card: FC = ({ + name, + image, + hp, + height, + weight, + type, +}) => { + return ( +
+
+

{name}

+ HP{hp} +
+ + {name} + +
+ ) +} diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..b06b73f --- /dev/null +++ b/next.config.js @@ -0,0 +1,13 @@ +module.exports = { + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "raw.githubusercontent.com", + port: "", + pathname: "/PokeAPI/sprites/master/sprites/pokemon/**", + search: "", + }, + ], + }, +} diff --git a/next.config.mjs b/next.config.mjs deleted file mode 100644 index 4678774..0000000 --- a/next.config.mjs +++ /dev/null @@ -1,4 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = {}; - -export default nextConfig; diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 0000000..c12d8bb --- /dev/null +++ b/pages/_app.tsx @@ -0,0 +1,19 @@ +import type { ReactElement, ReactNode } from "react" +import type { NextPage } from "next" +import type { AppProps } from "next/app" +import "../css/styles.css" + +export type NextPageWithLayout

= NextPage & { + getLayout?: (page: ReactElement) => ReactNode +} + +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout +} + +export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { + // Use the layout defined at the page level, if available + const getLayout = Component.getLayout ?? ((page) => page) + + return getLayout() +} diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..3176bf7 --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1,49 @@ +import { POKEMONS_QUERY } from "@/apollo-graphql/queries/pokemons" +import { Card } from "@/components/Card/index" +import { pokemonsData, PokemonsProps } from "@/types/pokemons" +import client from "../apollo-graphql/apollo-client" + +export default function Home({ pokemonsData }: PokemonsProps) { + return ( +

+
+

Pokemon Guess Who

+
+ {pokemonsData.map((item: pokemonsData) => ( + + ))} +
+
+
+ ) +} + +export async function getStaticProps() { + let pokemonsData = {} + + await client + .query({ + query: POKEMONS_QUERY, + }) + .then((res) => { + pokemonsData = res.data.pokemon_v2_pokemon + }) + + return { + props: { + pokemonsData, + }, + } +} diff --git a/tailwind.config.ts b/tailwind.config.ts index d43da91..bf1fed8 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,10 +1,9 @@ -import type { Config } from "tailwindcss"; +import type { Config } from "tailwindcss" const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", - "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { @@ -15,5 +14,5 @@ const config: Config = { }, }, plugins: [], -}; -export default config; +} +export default config diff --git a/tsconfig.json b/tsconfig.json index e7ff90f..5a1e9c8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "bundler", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve",