Rename frontend directory (#472)

* Rename directory

* Cleanup

* Recover lost images

* remove lint

frontend/src/components/InstalledPackages/HealthStatus.tsx

@@ -0,0 +1,41 @@
+import { HD_RESOURCE_CONDITION_TYPE } from "../../API/releases";
+import { Tooltip } from "flowbite-react";
+import { ReleaseHealthStatus } from "../../data/types";
+import { v4 as uuidv4 } from "uuid";
+
+interface Props {
+  statusData: ReleaseHealthStatus[];
+}
+
+const HealthStatus = ({ statusData }: Props) => {
+  const statuses = statusData.map((item) => {
+    for (let i = 0; i < item.status.conditions.length; i++) {
+      const cond = item.status.conditions[i];
+
+      if (cond.type !== HD_RESOURCE_CONDITION_TYPE) {
+        continue;
+      }
+
+      return (
+        <Tooltip
+          key={uuidv4()} // this is not a good practice, we need to fetch some unique id from the backend
+          content={`${cond.status} ${item.kind} ${item.metadata.name}`}
+        >
+          <span
+            className={`inline-block ${
+              cond.status === "Healthy"
+                ? "bg-success"
+                : cond.status === "Progressing"
+                ? "bg-warning"
+                : "bg-danger"
+            } w-2.5 h-2.5 rounded-sm`}
+          ></span>
+        </Tooltip>
+      );
+    }
+  });
+
+  return <div className="flex flex-wrap gap-1">{statuses}</div>;
+};
+
+export default HealthStatus;