Added navbar, added CP range

app/api/pokemons/pokemon/[pokemon_name]/route.ts

@@ -28,6 +28,7 @@ export async function GET(
       buddy_distance,
       moves,
       evolution_family,
+      cp_range,
     ] = await Promise.all([
       findDualTypeDoubleDmgFrom(pokemon_name),
       findDualTypeDoubleDmgTo(pokemon_name),
@@ -40,6 +41,7 @@ export async function GET(
       findPokemonBuddy(pokemon_name),
       findAllMoves(pokemon_name),
       findEvolutionFamily(pokemon_name),
+      findCPRange(pokemon_name),
     ])
 
     return NextResponse.json(
@@ -57,8 +59,9 @@ export async function GET(
         buddy_distance: buddy_distance,
         moves: moves,
         evolution_family: evolution_family,
-        sprite: `https://img.pokemondb.net/sprites/go/normal/${pokemon_name}.png`,
-        sprite_shiny: `https://img.pokemondb.net/sprites/go/shiny/${pokemon_name}.png`,
+        cp_range: cp_range,
+        sprite: `https://img.pokemondb.net/sprites/go/normal/${pokemon_details.name}.png`,
+        sprite_shiny: `https://img.pokemondb.net/sprites/go/shiny/${pokemon_details.name}.png`,
       },
       { status: 200 }
     )
@@ -69,11 +72,21 @@ export async function GET(
 }
 
 async function getPokemonDetails(pokemonName: string) {
+  if (pokemonName === "nidoran♀") {
+    pokemonName = "nidoran-f"
+  } else if (pokemonName === "nidoran♂") {
+    pokemonName = "nidoran-m"
+  }
   const response = await axios.get(`${POKEAPI}/pokemon/${pokemonName}`)
   return response.data
 }
 
 async function getFlavorTextEntries(pokemonName: string) {
+  if (pokemonName === "nidoran♀") {
+    pokemonName = "nidoran-f"
+  } else if (pokemonName === "nidoran♂") {
+    pokemonName = "nidoran-m"
+  }
   const response = await axios.get(`${POKEAPI}/pokemon-species/${pokemonName}`)
   return response.data
 }
@@ -124,6 +137,11 @@ async function getChargedMove(moveName: string) {
 }
 
 async function getEvolutions(pokemonName: string) {
+  if (pokemonName === "nidoran♀") {
+    pokemonName = "nidoran-f"
+  } else if (pokemonName === "nidoran♂") {
+    pokemonName = "nidoran-m"
+  }
   const response = await axios.get(`${POKEAPI}/pokemon-species/${pokemonName}`)
   const response2 = await axios.get(response.data.evolution_chain.url)
   function getAllEvolutions(evolutionChain: { chain: any }) {
@@ -159,7 +177,6 @@ async function getCurrentMoves(pokemonName: string) {
       pokemon.pokemon_name.toLowerCase() === pokemonName &&
       pokemon.form === "Normal"
   )
-  console.log(pokemonMoves)
   if (pokemonMoves.cached) return pokemonMoves
   // Helper function to handle move details retrieval
   const fetchMoveDetails = async (moveName: string, isCharged: boolean) => {
@@ -277,6 +294,10 @@ async function getPokemonStats(pokemon_name: string) {
   return stats
 }
 
+async function getCPMultiplier() {
+  const response = await axios.get(`${POGOAPI}/cp_multiplier.json`)
+  return response.data
+}
 async function findPokemonBuddy(pokemon_name: string) {
   try {
     const response = await axios.get(`${POGOAPI}/pokemon_buddy_distances.json`)
@@ -477,3 +498,48 @@ async function findEvolutionFamily(pokemonName: string) {
     )
   }
 }
+
+async function findCPRange(pokemonName: string) {
+  try {
+    const pokemonStats = await getPokemonStats(pokemonName)
+    let CPMultiplier = await getCPMultiplier()
+    CPMultiplier.push({ level: 45.5, multiplier: 0.81779999 })
+    CPMultiplier.push({ level: 46, multiplier: 0.82029999 })
+    CPMultiplier.push({ level: 46.5, multiplier: 0.82279999 })
+    CPMultiplier.push({ level: 47, multiplier: 0.82529999 })
+    CPMultiplier.push({ level: 47.5, multiplier: 0.82779999 })
+    CPMultiplier.push({ level: 48, multiplier: 0.83029999 })
+    CPMultiplier.push({ level: 48.5, multiplier: 0.83279999 })
+    CPMultiplier.push({ level: 49, multiplier: 0.83529999 })
+    CPMultiplier.push({ level: 49.5, multiplier: 0.83779999 })
+    CPMultiplier.push({ level: 50, multiplier: 0.84029999 })
+    CPMultiplier.push({ level: 50.5, multiplier: 0.84279999 })
+    let data: any = []
+    CPMultiplier.map((cp: { level: number; multiplier: number }) => {
+      if (Number.isInteger(cp.level)) {
+        data.push({
+          level: cp.level,
+          range: `${Math.floor(
+            (pokemonStats.base_attack *
+              Math.pow(pokemonStats.base_defense, 0.5) *
+              Math.pow(pokemonStats.base_stamina, 0.5) *
+              Math.pow(cp.multiplier, 2)) /
+              10
+          )}-${Math.floor(
+            ((pokemonStats.base_attack + 15) *
+              Math.pow(pokemonStats.base_defense + 15, 0.5) *
+              Math.pow(pokemonStats.base_stamina + 15, 0.5) *
+              Math.pow(cp.multiplier, 2)) /
+              10
+          )}`,
+        })
+      }
+    })
+    return data
+  } catch (error) {
+    return NextResponse.json(
+      { msg: "findEvolutionFamily error", error },
+      { status: 500 }
+    )
+  }
+}

app/api/pokemons/route.ts

@@ -10,9 +10,6 @@ export async function GET(req: Request) {
     pokemons = pokemons.data.filter((pokemon: { form: string })=> {
       return pokemon.form === "Normal"
     })
-
-    console.log(pokemons)
-
     return NextResponse.json(
       {
         msg: "Success",

app/page.tsx

@@ -1,14 +1,21 @@
 import { ColorSchemeToggle } from "@/components/ColorSchemeToggle"
-import { Container } from "@mantine/core"
+import { Container, Flex, Title } from "@mantine/core"
 import { SearchBar } from "@/components/SearchBar"
-import { PokemonList } from "@/components/PokemonList"
+import { NavBar } from "@/components/NavBar"
 
 export default function Home() {
   return (
-    <Container fluid className="overflow-hidden">
-      <ColorSchemeToggle />
-      <SearchBar />
-      <PokemonList />
+    <Container fluid className="h-screen overflow-hidden">
+      <NavBar />
+      <Flex
+        className="h-full"
+        justify="center"
+        align="center"
+        direction="column"
+      >
+        <Title order={1}>PokeData</Title>
+        <SearchBar />
+      </Flex>
     </Container>
   )
 }

app/pokedex/page.tsx

@@ -0,0 +1,13 @@
+"use client"
+import { Container } from "@mantine/core"
+import { NavBar } from "@/components/NavBar"
+import { PokemonList } from "@/components/PokemonList"
+
+export default function PokemonName() {
+  return (
+    <Container fluid className="overflow-hidden w-full md:w-3/4 lg:w-1/2">
+      <NavBar />
+      <PokemonList />
+    </Container>
+  )
+}

app/pokemons/[pokemon_name]/page.tsx

@@ -1,20 +1,19 @@
 "use client"
-import { ColorSchemeToggle } from "@/components/ColorSchemeToggle"
 import { Container } from "@mantine/core"
 import { SearchBar } from "@/components/SearchBar"
 import { useParams } from "next/navigation"
 import { PokemonCard } from "@/components/PokemonCard"
 import usePokemon from "@/hooks/usePokemon"
+import { NavBar } from "@/components/NavBar"
 
 export default function PokemonName() {
   const { pokemon_name } = useParams()
   const { data: pokemon = [], isLoading } = usePokemon(pokemon_name as string)
 
   return (
     <Container fluid className="overflow-hidden w-full md:w-3/4 lg:w-1/2">
-      <ColorSchemeToggle />
+      <NavBar />
       <SearchBar />
-
       {pokemon_name && <PokemonCard pokemon={pokemon} isLoading={isLoading} />}
     </Container>
   )

components/ColorSchemeToggle.tsx

@@ -6,7 +6,7 @@ export function ColorSchemeToggle() {
   const { setColorScheme } = useMantineColorScheme()
 
   return (
-    <Group justify="center" mt="sm">
+    <Group justify="center" mt="sm" className="absolute inset-x-0 bottom-3">
       <Button onClick={() => setColorScheme("light")}>Light</Button>
       <Button onClick={() => setColorScheme("dark")}>Dark</Button>
     </Group>

components/NavBar.tsx

@@ -0,0 +1,35 @@
+"use client"
+import { Badge, NavLink } from "@mantine/core"
+import {
+  IconNotebook,
+  IconSearch,
+} from "@tabler/icons-react"
+import { useDisclosure } from "@mantine/hooks"
+import { Drawer, Burger, Container } from "@mantine/core"
+import { ColorSchemeToggle } from "./ColorSchemeToggle"
+import { useRouter } from "next/navigation"
+
+export const NavBar = () => {
+  const [opened, { open, close }] = useDisclosure(false)
+  const router = useRouter()
+  return (
+    <>
+      <Drawer opened={opened} onClose={close} title="Menu">
+        <NavLink
+          label="Search"
+          leftSection={<IconSearch size="1rem" stroke={1.5} />}
+          onClick={() => router.push("/")}
+        />
+        <NavLink
+          label="Pokedex"
+          leftSection={<IconNotebook size="1rem" stroke={1.5} />}
+          onClick={() => router.push("/pokedex")}
+        />
+        <ColorSchemeToggle />
+      </Drawer>
+      <Container fluid h={50}>
+        <Burger onClick={open} aria-label="Toggle navigation" className="absolute left-4 top-4"></Burger>
+      </Container>
+    </>
+  )
+}

components/PokemonCPRange.tsx

@@ -0,0 +1,28 @@
+import { Text, Image, Stack, Title, Group, Table } from "@mantine/core"
+
+interface PokemonCPRangeProps {
+  pokemon: Record<string, any>
+}
+
+export const PokemonCPRange: React.FC<PokemonCPRangeProps> = ({
+  pokemon: { cp_range },
+}) => {
+  const renderCP = cp_range?.map((cp: { level: number; range: string }) => (
+    <Table.Tr key={cp.level}>
+      <Table.Td>{cp.level}</Table.Td>
+      <Table.Td align="right">{cp.range}</Table.Td>
+    </Table.Tr>
+  ))
+
+  return (
+    <Table >
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Level</Table.Th>
+          <Table.Th className="flex justify-end items-end">CP</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody >{renderCP}</Table.Tbody>
+    </Table>
+  )
+}

components/PokemonCard.tsx

@@ -18,6 +18,7 @@ import { PokemonTypes } from "./PokemonTypes"
 import { PokemonWeatherBoosted } from "./PokemonWeatherBoosted"
 import { PokemonMoves } from "./PokemonMoves"
 import { PokemonEvolutions } from "./PokemonEvolutions"
+import { PokemonCPRange } from "./PokemonCPRange"
 
 interface PokemonCardProps {
   pokemon: Record<string, any>
@@ -29,12 +30,13 @@ export const PokemonCard: React.FC<PokemonCardProps> = ({
   isLoading,
 }) => {
   return (
-    <Tabs variant="pills" defaultValue="details">
-      <Tabs.List justify="center">
+    <Tabs variant="pills" defaultValue="details" className="pb-5">
+      <Tabs.List grow justify="center" className="pb-2">
         <Tabs.Tab value="details">Details</Tabs.Tab>
         <Tabs.Tab value="shiny">Shiny Rates</Tabs.Tab>
         <Tabs.Tab value="moves">Moves</Tabs.Tab>
         <Tabs.Tab value="evolutions">Evolutions</Tabs.Tab>
+        <Tabs.Tab value="cp">CP Range</Tabs.Tab>
       </Tabs.List>
 
       <Tabs.Panel value="details">
@@ -129,6 +131,23 @@ export const PokemonCard: React.FC<PokemonCardProps> = ({
           </Card>
         </Skeleton>
       </Tabs.Panel>
+      <Tabs.Panel value="cp">
+        <Skeleton visible={isLoading}>
+          <Card shadow="sm" padding="lg" radius="md" withBorder>
+            <Title className="text-center" order={1}>
+              {capitalize(pokemon?.pokemon_name)}
+            </Title>
+            <Text
+              size="xs"
+              c="dimmed"
+              className="text-center"
+            >{`"${pokemon?.pokemon_flavor_text}"`}</Text>
+            <PokemonImages pokemon={pokemon} />
+            <Divider my="sm" variant="dashed" />
+            <PokemonCPRange pokemon={pokemon} />
+          </Card>
+        </Skeleton>
+      </Tabs.Panel>
     </Tabs>
   )
 }

components/PokemonList.tsx

@@ -2,24 +2,24 @@
 import useAllPokemons from "@/hooks/useAllPokemons"
 import {
   Card,
-  Image,
   Text,
-  Badge,
-  Button,
-  Group,
   ScrollArea,
-  Stack,
   Flex,
+  Badge,
+  Group,
+  darken
 } from "@mantine/core"
 import { useRouter } from "next/navigation"
+import { colors } from "@/libs/utils"
+
 
 export const PokemonList = () => {
   const { data: allPokemons = [], isLoading: isPokemonsLoading } =
     useAllPokemons()
   const router = useRouter()
 
   const renderPokemons = allPokemons?.pokemons?.map((pokemon: any) => (
-    <Card
+    <Card bg={darken(colors[pokemon.type[0].toLowerCase()], 0.7)}
       onClick={() =>
         router.push(
           `/pokemons/${pokemon.pokemon_name.replace(/[^a-zA-Z]/g, "")}`
@@ -30,22 +30,26 @@ export const PokemonList = () => {
       withBorder
       key={pokemon.pokemon_name}
     >
-      <Flex gap="sm" align="center">
+      <Flex gap="sm" align="center" className="">
         <Flex direction="column">
           <Text fw={500}>{pokemon.pokemon_name}</Text>
           <Text size="xs" c="dimmed">
             #{pokemon.pokemon_id}
           </Text>
         </Flex>
-        <Badge color="pink" variant="light" className="ml-auto">
-          {pokemon.type.join(",")}
-        </Badge>
+        <Group className="ml-auto" gap="xs">
+          {pokemon?.type?.map((type: string) => (
+            <Badge key={type} color={colors[type.toLowerCase()]}>
+              {type}
+            </Badge>
+          ))}
+        </Group>
       </Flex>
     </Card>
   ))
 
   return (
-    <ScrollArea h={750} type="auto">
+    <ScrollArea h={800} type="auto">
       {renderPokemons}
     </ScrollArea>
   )