rearrange statistics block

king8fisher · Jul 22, 2024 · fe5472a · fe5472a
1 parent 170523d
commit fe5472a
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/src/components/atoms/StatisticsBlock/index.tsx b/src/components/atoms/StatisticsBlock/index.tsx
@@ -2,7 +2,7 @@ import { memo } from "react";
 import { IStatisticsUnitData } from "../../../data/model";
 import { getStatisticsImgUrl, roundTo } from "../../../helpers/tools";
 import { ContentWithTooltip } from "../ContentWithTooltip";
-import { FlexWrap, SingleImg, SingleSpan } from "./styles";
+import { SingleImg, SingleSpan } from "./styles";
 
 const SingleStatisticsPresenter = memo(
   ({ icon, amount, tooltip }: { icon: string; amount: number | string; tooltip: string }) => (
@@ -24,33 +24,41 @@ const SingleStatisticsPresenter = memo(
 
 export const StatisticsBlock = memo(({ unitData }: { unitData: IStatisticsUnitData }) => {
   return (
-    <FlexWrap>
+    <div className="grid grid-cols-5 gap-1 w-full">
       <SingleStatisticsPresenter icon="hp" tooltip="Hit Points" amount={unitData.unitStatistics.HP} />
       <SingleStatisticsPresenter icon="damage" tooltip="Attack" amount={unitData.unitStatistics.Attack} />
-      <SingleStatisticsPresenter icon="armor" tooltip="Pierce Armor" amount={unitData.unitStatistics.PierceArmor} />
       <SingleStatisticsPresenter icon="armor" tooltip="Melee Armor" amount={unitData.unitStatistics.MeleeArmor} />
       <SingleStatisticsPresenter
-        icon="accuracy"
-        tooltip="Accuracy Percent"
-        amount={`${unitData.unitStatistics.AccuracyPercent}%`}
+        icon="range-armor"
+        tooltip="Pierce Armor"
+        amount={unitData.unitStatistics.PierceArmor}
+      />
+      <SingleStatisticsPresenter icon="range" tooltip="Range" amount={unitData.unitStatistics.Range} />
+      <SingleStatisticsPresenter
+        icon="garrison"
+        tooltip="GarrisonCapacity"
+        amount={unitData.unitStatistics.GarrisonCapacity}
       />
       <SingleStatisticsPresenter
         icon="delay"
         tooltip="Attack Delay Seconds"
         amount={roundTo(unitData.unitStatistics.AttackDelaySeconds, 2)}
       />
       <SingleStatisticsPresenter
-        icon="garrison"
-        tooltip="GarrisonCapacity"
-        amount={unitData.unitStatistics.GarrisonCapacity}
+        icon="speed"
+        tooltip="Speed"
+        amount={unitData.unitStatistics.Speed}
       />
       <SingleStatisticsPresenter
         icon="line-of-sight"
         tooltip="Line Of Sight"
         amount={unitData.unitStatistics.LineOfSight}
       />
-      <SingleStatisticsPresenter icon="range" tooltip="Range" amount={unitData.unitStatistics.Range} />
-      <SingleStatisticsPresenter icon="speed" tooltip="Speed" amount={unitData.unitStatistics.Speed} />
-    </FlexWrap>
+      <SingleStatisticsPresenter
+        icon="accuracy"
+        tooltip="Accuracy Percent"
+        amount={`${unitData.unitStatistics.AccuracyPercent}%`}
+      />
+    </div>
   );
 });