Frog image (#157)

frontend/src/Components/PetDetails.tsx

@@ -1,25 +1,41 @@
 import { Pet } from "../lib/api/usePetApi";
 import PetDetailsProgressBar from "./PetDetailsProgressBar";
 
-const PetDetails = (props: {pet: Pet, petImageSrc: string}) => {
-  const {pet, petImageSrc} = props;
+const PetDetails = (props: { pet: Pet; petImageSrc: string }) => {
+  const { pet, petImageSrc } = props;
 
   if (!pet.state) return;
   const petState = pet.state;
 
   return (
     <>
       <div className="col-6">
-        <img className="img-fluid" src={petImageSrc} alt="Image showing the pet" />
+        <img
+          className="img-fluid"
+          src={petImageSrc}
+          alt="Image showing the pet"
+        />
       </div>
       <div className="col-6">
         <div className="h2 px-3 py-4">{pet.name}</div>
-        <PetDetailsProgressBar value={petState.xp} color="green" />
-        <PetDetailsProgressBar value={petState.happiness} color="purple" />
-        <PetDetailsProgressBar value={petState.health} color="red" />
+        <PetDetailsProgressBar
+          labelName="XP"
+          value={petState.xp}
+          color="green"
+        />
+        <PetDetailsProgressBar
+          labelName="Happiness"
+          value={petState.happiness}
+          color="purple"
+        />
+        <PetDetailsProgressBar
+          labelName="Health"
+          value={petState.health}
+          color="red"
+        />
       </div>
     </>
   );
-}
+};
 
 export default PetDetails;

frontend/src/Components/PetDetailsProgressBar.tsx

@@ -4,14 +4,18 @@ import { IProgressBarProps } from "react-progressbar-fancy/build/ProgressBar/Pro
 /**
  * See https://github.com/RavinRau/react-progressbar-fancy
  */
-const PetDetailsProgressBar = (props: {value?: number, color: IProgressBarProps["progressColor"]}) => {
+const PetDetailsProgressBar = (props: {
+  labelName: string;
+  value?: number;
+  color: IProgressBarProps["progressColor"];
+}) => {
   return (
     <>
       {props.value != undefined && (
         <div>
-          <div className="h5 px-3">{props.value}</div>
+          <div className="h5 px-3">{props.labelName}</div>
           <ProgressBar
-            className="px-1"
+            className="px-1 py-2"
             hideText={true}
             progressColor={props.color}
             score={props.value}
@@ -20,6 +24,6 @@ const PetDetailsProgressBar = (props: {value?: number, color: IProgressBarProps[
       )}
     </>
   );
-}
+};
 
 export default PetDetailsProgressBar;