Adding in framer-motion to animate in cards when in view, adding scroll to top button.

pages/index.tsx

@@ -2,10 +2,12 @@ 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, useState, useMemo, useRef, MutableRefObject, RefObject } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import { debounce } from 'lodash';
+import { motion } from 'framer-motion';
 
 import Modal from '../components/modal';
+import Transition from '../components/transition';
 
 export async function getStaticProps(context) {
 
@@ -23,11 +25,10 @@ export default function Home(props) {
 
   const [search, setSearch] = useState('');
   const [selectedCard, setSelectedCard] = useState({});
-  const [cards, setCards] = useState<any>([]);
+  const [cardRow, setCardRow] = useState<any>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
-  const [queryParams, setQueryParams] = useState('');
   const [modalOpen, setModalOpen] = useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -42,7 +43,11 @@ export default function Home(props) {
       .then( res => res.json() )
       .then( (res) => {
         if( res.data ) {
-          setCards(res.data);
+          let cardMatrix = [];
+          for(let i = 0; i < res.data.length; i += 4) {
+            cardMatrix.push(res.data.slice(i, i + 4))
+          }
+          setCardRow(cardMatrix);
           setLoading(false);
         } else {
           setLoading(false);
@@ -87,39 +92,43 @@ export default function Home(props) {
         </div>
       </div>
 
-      <main className="container my-4">
-        { cards.length === 0 ?
-          <div className="text-center search-placeholder">
-            <div className="card-container h-48 relative">
-              {props.initialCards.map( (card: any) => 
-              <Image
-                className="card" 
-                key={card.id} 
-                alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
-              ).slice(0, 5)
-              }
+        <main className="container my-4">
+          { cardRow.length === 0 ?
+            <div className="text-center search-placeholder">
+              <div className="card-container h-48 relative">
+                  {props.initialCards.map( (card: any) => 
+                  <Image
+                    className="card" 
+                    key={card.id} 
+                    alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
+                  ).slice(0, 5)
+                  }
+              </div>
+              <h2>Please search for a card!</h2>
             </div>
-            <h2>Please search for a card!</h2>
-          </div>
-          :
-          <section className="flex flex-wrap justify-center items-center">
-            {loading && search !== "" ? 
-              <div className="spinner mx-auto"></div>
-              :
-              cards && cards.map( (card: any) => 
-              <Image onClick={() => {
-                setSelectedCard(card);
-                setModalOpen(true);
-                document.body.classList.toggle('prevent-scroll');
-              }} 
-                className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-1/2 md:w-1/3 lg:w-1/4 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>
+            :
+            <section className="flex flex-wrap justify-center items-center">
+              {loading && search !== "" ? 
+                <div className="spinner mx-auto"></div>
+                :
+                cardRow && cardRow.map( (row: any, i: number) => 
+                  <Transition className="flex">
+                    {row.map( (card: any, i: number) => 
+                      <Image onClick={() => {
+                        setSelectedCard(card);
+                        setModalOpen(true);
+                        document.body.classList.toggle('prevent-scroll');
+                      }} 
+                        className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-1/2 md:w-1/3 lg:w-1/4 p-2" 
+                        key={card.id} 
+                        alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
+                      )}
+                  </Transition>
+                )
+              }
+            </section>
+          }
+        </main>
 
       <footer className={styles.footer}>
         <a
@@ -130,11 +139,16 @@ export default function Home(props) {
           </a>
       </footer>
 
-      <div title="Back to top" aria-label="Scrool back to the top of the page" className="rounded-full">
-        <span className="material-symbols-outlined">
-          arrow_upward
-        </span>
-      </div>
+      { !modalOpen &&
+        <div 
+          title="Back to top" 
+          aria-label="Scrool back to the top of the page" 
+          className="bg-red-600 bottom-4 cursor-pointer fixed flex justify-center items-center right-4 rounded-full p-4" onClick={() => window.scrollTo(0, 0)}>
+          <span className="material-symbols-outlined">
+            arrow_upward
+          </span>
+        </div>
+      }
 
       <Modal ref={modalRef} modalOpen={modalOpen} toggleModal={setModalOpen} card={selectedCard} />