refactor: streamline NumberItem component and enhance styling for imp…

…roved layout and responsiveness
Iryna-Vyshniak · Jan 18, 2025 · 9991871 · 9991871
1 parent a4bbf50
commit 9991871
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 53 deletions.
diff --git a/src/components/numbers/NumberItem.tsx b/src/components/numbers/NumberItem.tsx
@@ -1,47 +1,34 @@
-import React, { useState } from 'react';
+import React from 'react';
 
-import { IonImg, IonPopover } from '@ionic/react';
+import { IonImg, IonPopover, IonThumbnail } from '@ionic/react';
 
-import NumberDragon from '../../assets/images/dragon-game.png';
 import { useAudioPlayer } from '../../shared/hooks/audio/useAudioPlayer';
 import { ItemProps, Number } from '../../shared/types';
 import { generateGemImages } from '../../shared/utils';
 
 const NumberItem: React.FC<ItemProps<Number>> = ({ item }) => {
   const { playAudio } = useAudioPlayer(true);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [hasError, setHasError] = useState<boolean>(false);
+
+  const dragonImageUrl = item.imageUrl || '';
   return (
     <li className='flex items-center justify-center'>
       <button
         id={`hover-trigger-${item._id}`}
         onClick={() => playAudio(item.sound)}
-        className='number-btn special-font custom text-center tracking-wide'
+        className='number-btn special-font custom relative flex h-[12vmin] w-32 flex-col items-center justify-end gap-2 text-center tracking-wide md:h-[8vmin] md:w-[10vmin] md:items-center lg:w-[12vmin]'
         data-label={item.number}
       >
-        <span className='number-img-wrapper'>
-          {isLoading && !hasError && (
+        {dragonImageUrl ? (
+          <IonThumbnail className='number-img-wrapper absolute -top-6 left-[60%] z-20 w-1/3 -translate-x-[60%] transform md:-top-2 md:w-1/2'>
             <IonImg
-              src={NumberDragon} /* Default image */
-              alt='default dragon'
-              className='number-img'
+              src={item.imageUrl || ''}
+              alt={item.label + 'dragon baby'}
+              className='number-img h-auto w-full'
             />
-          )}
-
-          <IonImg
-            src={item.imageUrl || ''}
-            alt={item.label + 'dragon baby'}
-            className='number-img'
-            onIonImgWillLoad={() => setIsLoading(true)}
-            onIonImgDidLoad={() => setIsLoading(false)} // Image loaded
-            onIonError={() => {
-              setIsLoading(false);
-              setHasError(true); // If loading error
-            }}
-          />
-        </span>
+          </IonThumbnail>
+        ) : null}
 
-        <span className='number-label p-4'>{item.label}</span>
+        <span className='number-label mx-4 pl-6'>{item.label}</span>
       </button>
       <IonPopover
         trigger={`hover-trigger-${item._id}`}

diff --git a/src/theme/tailwind.css b/src/theme/tailwind.css
@@ -587,24 +587,33 @@ video {
   top: 0px;
   bottom: 0px;
 }
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+.-bottom-40 {
+  bottom: -10rem;
+}
 .-left-1 {
   left: -0.25rem;
 }
 .-left-8 {
   left: -2rem;
 }
+.-top-10 {
+  top: -2.5rem;
+}
 .-top-4 {
   top: -1rem;
 }
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-10 {
+  bottom: 2.5rem;
+}
 .bottom-\[12\%\] {
   bottom: 12%;
 }
-.bottom-\[5\%\] {
-  bottom: 5%;
-}
 .left-1 {
   left: 0.25rem;
 }
@@ -647,27 +656,27 @@ video {
 .top-\[60\%\] {
   top: 60%;
 }
-.-bottom-1\/2 {
-  bottom: -50%;
-}
-.-bottom-1 {
-  bottom: -0.25rem;
-}
 .top-full {
   top: 100%;
 }
-.-top-10 {
-  top: -2.5rem;
+.-top-6 {
+  top: -1.5rem;
 }
-.bottom-10 {
-  bottom: 2.5rem;
+.-top-2 {
+  top: -0.5rem;
 }
-.-bottom-40 {
-  bottom: -10rem;
+.left-\[55\%\] {
+  left: 55%;
+}
+.left-\[60\%\] {
+  left: 60%;
 }
 .isolation-auto {
   isolation: auto;
 }
+.-z-0 {
+  z-index: 0;
+}
 .-z-10 {
   z-index: -10;
 }
@@ -680,18 +689,6 @@ video {
 .z-20 {
   z-index: 20;
 }
-.-z-0 {
-  z-index: 0;
-}
-.-z-\[1\] {
-  z-index: -1;
-}
-.-z-\[10\] {
-  z-index: -10;
-}
-.z-\[10\] {
-  z-index: 10;
-}
 .row-span-1 {
   grid-row: span 1 / span 1;
 }
@@ -891,6 +888,12 @@ video {
 .h-screen {
   height: 100vh;
 }
+.h-\[8vmin\] {
+  height: 8vmin;
+}
+.h-\[12vmin\] {
+  height: 12vmin;
+}
 .max-h-screen {
   max-height: 100vh;
 }
@@ -984,6 +987,9 @@ video {
 .w-screen {
   width: 100vw;
 }
+.w-\[6vmin\] {
+  width: 6vmin;
+}
 .max-w-\[800px\] {
   max-width: 800px;
 }
@@ -1068,6 +1074,18 @@ video {
     rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-translate-x-\[55\%\] {
+  --tw-translate-x: -55%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.-translate-x-\[60\%\] {
+  --tw-translate-x: -60%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-rotate-2 {
   --tw-rotate: -2deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -1136,6 +1154,9 @@ video {
 .items-start {
   align-items: flex-start;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -1278,6 +1299,10 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1657,6 +1682,10 @@ ion-toolbar {
     bottom: 10%;
   }
 
+  .md\:-top-2 {
+    top: -0.5rem;
+  }
+
   .md\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -1674,6 +1703,10 @@ ion-toolbar {
     height: 6vmin;
   }
 
+  .md\:h-\[8vmin\] {
+    height: 8vmin;
+  }
+
   .md\:w-14 {
     width: 3.5rem;
   }
@@ -1690,6 +1723,26 @@ ion-toolbar {
     width: 80%;
   }
 
+  .md\:w-\[8vmin\] {
+    width: 8vmin;
+  }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:w-\[10vmin\] {
+    width: 10vmin;
+  }
+
+  .md\:w-\[60\%\] {
+    width: 60%;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
   .md\:gap-6 {
     gap: 1.5rem;
   }
@@ -1709,6 +1762,14 @@ ion-toolbar {
     width: 33.333333%;
   }
 
+  .lg\:w-full {
+    width: 100%;
+  }
+
+  .lg\:w-\[12vmin\] {
+    width: 12vmin;
+  }
+
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }