- improved Dashboard ui

src/ui/Badge.tsx

@@ -0,0 +1,24 @@
+import type { Icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { capitalize } from "../utils/utils";
+
+type BadgeProps = {
+  icon?: Icon | IconDefinition;
+  text: string;
+};
+
+const Badge = ({ icon, text }: BadgeProps) => {
+  const lowerCaseWord = text.toLowerCase();
+  return (
+    <span
+      className={`text-sm font-medium inline-flex items-center px-2 py-0.5 rounded-md me-2 
+        border-2 space-x-2
+         ${text.toLowerCase() === "running" ? "bg-green-800 text-green-300 border-green-900" : "bg-red-800 text-red-300 border-red-900"} `}
+    >
+      {icon && <FontAwesomeIcon icon={icon} />}
+      <span>{capitalize(lowerCaseWord)}</span>
+    </span>
+  );
+};
+
+export default Badge;