From c429fa389967974c2f31b7e79078572c9dcf9897 Mon Sep 17 00:00:00 2001
From: yasuaki-kumazaki <yasuaki.kumazaki@haw-hamburg.de>
Date: Mon, 1 Jul 2024 17:03:24 +0200
Subject: [PATCH] fixed pet page

---
 frontend/src/Components/PetDetails.tsx        | 30 ++++++++++++++-----
 .../src/Components/PetDetailsProgressBar.tsx  | 12 +++++---
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Components/PetDetails.tsx b/frontend/src/Components/PetDetails.tsx
index a98cf00e..72e6e476 100644
--- a/frontend/src/Components/PetDetails.tsx
+++ b/frontend/src/Components/PetDetails.tsx
@@ -1,8 +1,8 @@
 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;
@@ -10,16 +10,32 @@ const PetDetails = (props: {pet: Pet, petImageSrc: string}) => {
   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;
diff --git a/frontend/src/Components/PetDetailsProgressBar.tsx b/frontend/src/Components/PetDetailsProgressBar.tsx
index edc48c86..da3ff6cc 100644
--- a/frontend/src/Components/PetDetailsProgressBar.tsx
+++ b/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;