edited search page look

BrianCheung1 · Oct 5, 2023 · eca3962 · eca3962
1 parent e269c4d
commit eca3962
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 26 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    // Other rules
+    "@next/next/no-img-element": "off"
+  }
 }
diff --git a/app/api/pokemon/[pokemon_name]/route.ts b/app/api/pokemon/[pokemon_name]/route.ts
@@ -15,7 +15,7 @@ export async function GET(
     const pokemon_id = types.data.find(
       (data: { pokemon_name: string }) =>
         data.pokemon_name.toLowerCase() === pokemon_name.toLowerCase()
-    ).id
+    ).pokemon_id
     const pokemon_types = types.data.find(
       (data: { pokemon_name: string }) =>
         data.pokemon_name.toLowerCase() === pokemon_name.toLowerCase()
@@ -48,6 +48,7 @@ export async function GET(
         msg: "Success",
         pokemon_types: pokemon_types,
         type_effectiveness: type_effectiveness_data,
+        sprite: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${pokemon_id}.svg`,
       },
       { status: 200 }
     )

diff --git a/app/globals.css b/app/globals.css
@@ -2,3 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+    @apply bg-[#353535] h-full overflow-x-hidden
+  }
+
+  #__next {
+    @apply h-full
+  }
+
+  html {
+    @apply h-full
+  }
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,8 +4,8 @@ import useTypes from "@/hooks/usePokemon"
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>
+    <main className="flex flex-col items-center justify-between p-24">
+      <div className="">
         <SearchBar />
       </div>
     </main>

diff --git a/components/searchBar.tsx b/components/searchBar.tsx
@@ -3,45 +3,69 @@ import usePokemon from "@/hooks/usePokemon"
 
 export const SearchBar = () => {
   const [searchTerm, setSearchTerm] = useState("")
-  const { data: pokemon = [], isLoading } = usePokemon(searchTerm)
+  const [submittedTerm, setSubmittedTerm] = useState("")
+  const { data: pokemon = [], isLoading } = usePokemon(submittedTerm)
 
-  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(event.target.value)
-    console.log(`Searching for ${searchTerm}`)
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    setSubmittedTerm(searchTerm)
   }
 
   const renderTypeEffectiveness = () => {
     const list = []
     for (const key in pokemon?.type_effectiveness) {
       list.push(<div>{`${key} Moves`}:</div>)
       for (const key2 in pokemon?.type_effectiveness[key]) {
-        list.push(<div className="text-xl">{`${pokemon?.type_effectiveness[key][key2]}x more dmg to ${key2}`}</div>)
+        list.push(
+          <div>{`${pokemon?.type_effectiveness[key][key2]}x more dmg to ${key2}`}</div>
+        )
       }
     }
-    if(!list){
+    if (!list) {
       return null
     }
     return list
   }
 
   return (
-    <div className="container mx-auto mt-20">
+    <div className="container">
       <div className="flex flex-col items-center justify-center">
-        <div className="">
-          <input
-            type="text"
-            value={searchTerm}
-            onChange={handleSearch}
-            className="w-full h-10 px-4 pr-10 text-sm bg-white border border-gray-300 rounded-lg lg:w-80 focus:outline-none"
-            placeholder="Search term..."
-          />
-        </div>
-        <div className="mt-10 text-2xl flex flex-col justify-center items-center">
-          {pokemon?.pokemon_types && "Type:"} <div className="text-xl">{pokemon?.pokemon_types?.join(", ")}</div>
-        </div>
-        <div className="mt-10 text-2xl flex flex-col justify-center items-center">
-          {renderTypeEffectiveness()}
-        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="mb-12 justify-center text-center">
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                setSearchTerm(event.target.value)
+                setSubmittedTerm("")
+              }}
+              className="w-full h-10 px-4 pr-10 text-sm bg-[#3C6E71] border border-[#284B63] rounded-lg lg:w-80 outline-none focus:outline-none text-[#FFFFFF]"
+              placeholder="Search term..."
+            />
+            <button type="submit" className="text-[#D9D9D9]">search</button>
+          </div>
+        </form>
+
+        {Object.keys(pokemon).length > 0 && (
+          <div className="flex md:flex-row flex-col rounded-lg bg-[#3C6E71] shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
+            <img
+              className="object-fit rounded-lg p-4"
+              src={`${pokemon?.sprite}`}
+              alt=""
+            />
+            <div className="flex flex-col p-4">
+              <h5 className="mb-2 text-xl font-medium text-[#FFFFFF] dark:text-neutral-50">
+                {searchTerm}
+              </h5>
+              <p className="mb-4 text-base text-[#D9D9D9] ">
+                {pokemon?.pokemon_types &&
+                  `Type: ${pokemon?.pokemon_types?.join(", ")}`}
+                {renderTypeEffectiveness()}
+              </p>
+              <p className="mb-4 text-base text-[#284B63]">{}</p>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )