[Research] refactor the style of status on cluster drawer

src/components/Drawer/ClusterDrawer/index.tsx

@@ -24,7 +24,7 @@ import {
   poiStatusTypeMessageKeys,
   poiStatusValueMessageKeys,
 } from "../../../constants/model/poi";
-import { statusColor } from "../../../constants/statusStyle";
+import { clusterListStatusIcon } from "../../../constants/statusStyle";
 import { getDownloadURL, getStorage, ref } from "firebase/storage";
 import { firebaseApp } from "../../../utils/firebase";
 import { getEntry } from "../../../constants/entry";
@@ -131,16 +131,23 @@ const PoiListItem: React.FC<PoiListItemProps> = (props) => {
                 radius="sm"
                 classNames={{
                   content: "px-0.5 whitespace-normal text-xs",
-                  base: statusColor(poi.data.status.type),
+                  base: "bg-transparent",
                 }}
               >
-                {t(poiStatusTypeMessageKeys[poi.data.status.type], {
-                  ns: ["model"],
-                })}
-                :
-                {t(poiStatusValueMessageKeys[poi.data.status.value], {
-                  ns: ["model"],
-                })}
+                <img
+                  src={clusterListStatusIcon(poi.data.status.type)}
+                  alt="status icon"
+                  className="inline mr-0.5"
+                />
+                <p className="inline align-middle">
+                  {t(poiStatusTypeMessageKeys[poi.data.status.type], {
+                    ns: ["model"],
+                  })}
+                  :
+                  {t(poiStatusValueMessageKeys[poi.data.status.value], {
+                    ns: ["model"],
+                  })}
+                </p>
               </Chip>
             </div>
             <div className="flex flex-row space-x-1 text-xs">

src/components/Drawer/PoiDrawer/index.tsx

@@ -19,7 +19,10 @@ import {
 import noImage from "../../../assets/images/noImage.svg";
 import poiDrawerLocation from "../../../assets/images/poiDrawerLocation.svg";
 import poiDrawerTargetSerial from "../../../assets/images/poiDrawerTargetSerial.svg";
-import { statusColor, statusIcon } from "../../../constants/statusStyle";
+import {
+  statusColor,
+  poiDrawerStatusIcon,
+} from "../../../constants/statusStyle";
 import {
   poiStatusTypeMessageKeys,
   poiStatusValueMessageKeys,
@@ -39,7 +42,7 @@ const PoiDrawerStatus: React.FC<{
   return (
     <div className="flex flex-row space-x-1 mt-1 items-center">
       <div className="basis-0.5/12">
-        <Image src={statusIcon(statusType || "")} alt="status" />
+        <Image src={poiDrawerStatusIcon(statusType || "")} alt="status" />
       </div>
       <Chip
         radius="sm"

src/constants/statusStyle.ts

@@ -8,6 +8,16 @@ import poiDrawerOccupation from "../assets/images/poiDrawerOccupation.svg";
 import poiDrawerThermalComfort from "../assets/images/poiDrawerThermalComfort.svg";
 import poiDrawerUsage from "../assets/images/poiDrawerUsage.svg";
 
+import clusterListAppearance from "../assets/images/clusterListAppearance.svg";
+import clusterListCleanliness from "../assets/images/clusterListCleanliness.svg";
+import clusterListCrowd from "../assets/images/clusterListCrowd.svg";
+import clusterListFunction from "../assets/images/clusterListFunction.svg";
+import clusterListMaintenance from "../assets/images/clusterListMaintenance.svg";
+import clusterListNoise from "../assets/images/clusterListNoise.svg";
+import clusterListOccupation from "../assets/images/clusterListOccupation.svg";
+import clusterListThermalComfort from "../assets/images/clusterListThermalComfort.svg";
+import clusterListUsage from "../assets/images/clusterListUsage.svg";
+
 function statusColor(type: string) {
   let thisColor: string;
 
@@ -47,7 +57,7 @@ function statusColor(type: string) {
   return thisColor;
 }
 
-function statusIcon(type: string) {
+function poiDrawerStatusIcon(type: string) {
   let thisIcon: string;
 
   switch (type) {
@@ -84,4 +94,41 @@ function statusIcon(type: string) {
   return thisIcon;
 }
 
-export { statusColor, statusIcon };
+function clusterListStatusIcon(type: string) {
+  let thisIcon: string;
+
+  switch (type) {
+    case "maintenance":
+      thisIcon = clusterListMaintenance;
+      break;
+    case "function":
+      thisIcon = clusterListFunction;
+      break;
+    case "appearance":
+      thisIcon = clusterListAppearance;
+      break;
+    case "occupation":
+      thisIcon = clusterListOccupation;
+      break;
+    case "usage":
+      thisIcon = clusterListUsage;
+      break;
+    case "crowd":
+      thisIcon = clusterListCrowd;
+      break;
+    case "noise":
+      thisIcon = clusterListNoise;
+      break;
+    case "thermalComfort":
+      thisIcon = clusterListThermalComfort;
+      break;
+    case "cleanliness":
+      thisIcon = clusterListCleanliness;
+      break;
+    default:
+      thisIcon = "";
+  }
+  return thisIcon;
+}
+
+export { statusColor, poiDrawerStatusIcon, clusterListStatusIcon };