hh

Author: gottasellemall69

components/Yugioh/Card.js

@@ -5,7 +5,7 @@ import { useCallback } from 'react';
 
 const Card = ( { cardData } ) => {
   const router = useRouter();
-  const { letter, setName } = router.query;    // only these two from URL
+  const { letter, setName, productName } = router.query;    // only these two from URL
 
   const getLocalImagePath = useCallback(
     ( cardId ) => `/images/yugiohImages/${ String( cardId ) }.jpg`, []
@@ -18,25 +18,23 @@ const Card = ( { cardData } ) => {
           pathname: "/yugioh/sets/[letter]/cards/card-details",
           query: {
             card: cardData.id,
-            letter,
+            letter: letter,
             set_name: setName, // only set name passed
           },
         } }
       >
 
 
-        <div className="hover:scale-105 hover:duration-100 transition-transform">
-          <Image
+        <div className="hover:scale-95 hover:duration-100 transition-transform">
+          <img
             className="object-scale-down object-center w-full h-full max-h-96"
-
             as="image"
-            quality={ 75 }
-            priority={ true }
-            unoptimized={ true }
+            priority="true"
+            unoptimized="true"
             src={ getLocalImagePath( cardData.id ) }
             alt={ `Card Image - ${ cardData.productName }` }
-            width={ 1600 }
-            height={ 1600 }
+            width="auto"
+            height="auto"
           />
         </div>
       </Link>

components/Yugioh/GridView.js

@@ -7,7 +7,7 @@ import cardData from '@/public/card-data/Yugioh/card_data.json';
 
 const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
   const router = useRouter();
-  const { cardId, card, setName, letter, lowPrice, ebay_price } = router.query;
+  const { productName, cardId, card, setName, letter, lowPrice, ebay_price } = router.query;
   const [ edit, setEdit ] = useState( {} );
   const [ editValues, setEditValues ] = useState( {} );
   const [ notification, setNotification ] = useState( { show: false, message: '' } );
@@ -156,15 +156,16 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
               >
                 {/* FRONT */ }
                 <div className="flip-card-front">
-                  <Image
+                  <img
                     className="w-full h-96 aspect-auto object-scale-down object-center"
                     as="image"
-                    priority
-                    unoptimized={ true }
+                    priority="true"
+                    unoptimized="true"
                     src={ cardImages ? cardImages.full : '/images/yugioh-card.png' }
                     alt={ `${ card.productName }` }
                     width={ 1600 }
-                    height={ 1600 } />
+                    height={ 1600 }
+                  />
                 </div>
 
                 {/* BACK */ }