Fixing some things, styling some things, need to add modal, and card information data to it

package-lock.json

@@ -9,9 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "@tauri-apps/api": "^1.1.0",
+        "@types/lodash": "^4.14.187",
         "@types/node": "18.11.9",
         "@types/react": "18.0.24",
         "@types/react-dom": "18.0.8",
+        "lodash": "^4.17.21",
         "next": "13.0.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -452,6 +454,11 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.187",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.187.tgz",
+      "integrity": "sha512-MrO/xLXCaUgZy3y96C/iOsaIqZSeupyTImKClHunL5GrmaiII2VwvWmLBu2hwa0Kp0sV19CsyjtrTc/Fx8rg/A=="
+    },
     "node_modules/@types/node": {
       "version": "18.11.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
@@ -936,6 +943,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1764,6 +1776,11 @@
       "dev": true,
       "optional": true
     },
+    "@types/lodash": {
+      "version": "4.14.187",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.187.tgz",
+      "integrity": "sha512-MrO/xLXCaUgZy3y96C/iOsaIqZSeupyTImKClHunL5GrmaiII2VwvWmLBu2hwa0Kp0sV19CsyjtrTc/Fx8rg/A=="
+    },
     "@types/node": {
       "version": "18.11.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
@@ -2107,6 +2124,11 @@
       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
       "dev": true
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1.1.0",
+    "@types/lodash": "^4.14.187",
     "@types/node": "18.11.9",
     "@types/react": "18.0.24",
     "@types/react-dom": "18.0.8",
+    "lodash": "^4.17.21",
     "next": "13.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pages/index.tsx

@@ -2,26 +2,57 @@ import Head from 'next/head';
 import { invoke } from '@tauri-apps/api/tauri';
 import Image from 'next/image';
 import styles from '../styles/Home.module.css';
-import { useEffect } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
+import { debounce } from 'lodash';
 
 export default function Home() {
+
+  const [search, setSearch] = useState('');
+  const [cards, setCards] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [queryParams, setQueryParams] = useState('');
+
+  const searchForCard = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    setSearch(event.target.value);
+    setLoading(true);
+    await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent(event.target.value)}`)
+      .then( res => res.json() )
+      .then( ({data}) => {
+        setCards(data);
+        setLoading(false);
+      })
+      .catch( err => console.log(err) );
+  };
+
+  const debounceSearch = useMemo( () => debounce(searchForCard, 300), [search] );
+
   useEffect(() => {
     invoke('greet', { name: 'World' }).then(console.log).catch(console.error);
-    fetch(`https://api.scryfall.com/cards/search?order=cmc&q=c%3Ared+pow%3D3`).then( data => console.log( data ) );
   }, []);
+
   return (
-    <div className="container">
+    <div>
       <Head>
         <title>Magic Card Valuator</title>
       </Head>
 
-      <main>
+      <div className={`bg-center bg-no-repeat flex justify-center items-center mb-4 h-96 ${styles.hero}`}>
-        <h4 className="text-4xl font-bold text-red-500 underline">
+        <div className="w-3/4 text-center">
-          Hello world!
+          <label htmlFor="search" className="block mx-auto font-bold mb-2 text-2xl">Search for a Magic Card</label>
-        </h4>
+          <input id="search" name="search" type="text" className={`block w-1/2 mx-auto rounded-full py-2 px-4 ${styles.search}`} onChange={debounceSearch} />
-        <h1 className={styles.title}>
+        </div>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
+      </div>
-        </h1>
+
+      <main className="container">
+        <section className="flex flex-wrap">
+          {loading && !cards.length ? 
+            <div className="spinner"></div>
+            :
+            cards && cards.map( (card: any) => <Image className="hover:scale-110 transition-transform duration-150 ease-in-out w-1/6 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} /> )
+          }
+        </section>
       </main>
 
       <footer className={styles.footer}>

styles/Home.module.css

@@ -2,15 +2,25 @@
   min-height: 100vh;
 }
 
+.search {
+  background-color: #333333;
+}
+
+.hero {
+  background: url("/hero.png");
+  background-size: cover;
+}
+
 .footer {
   display: flex;
   flex: 1;
   padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
+  border-top: 1px solid #696969;
   justify-content: center;
   align-items: center;
 }
 
+
 .footer a {
   display: flex;
   justify-content: center;

styles/globals.css

@@ -8,6 +8,31 @@
   }
   body {
     color: white;
-    background: #0e1111;
+    background: #1c1c1c;
+  }
+}
+
+.spinner {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+.spinner:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
   }
 }