Token UI polish

Author: jeanp413

components/dashboard/src/components/PillLabel.tsx

@@ -4,21 +4,27 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+export type PillType = "info" | "warn" | "success";
+
+const PillClsMap: Record<PillType, string> = {
+    info: "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100",
+    warn: "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100",
+    success: "bg-green-100 text-green-700 dark:bg-green-600 dark:text-green-100",
+};
+
 /**
  * Renders a pill.
  *
  * **type**\
  * info: Renders a blue pile label (default).\
  * warn: Renders an orange pile label.
+ * success: Renders an green pile label.
  *
  * **className**\
  * Add additional css classes to style this component.
  */
-export default function PillLabel(props: { children?: React.ReactNode; type?: "info" | "warn"; className?: string }) {
-    const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
-    const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
-    const style = `px-2 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
-        props.className
-    }`;
+export default function PillLabel(props: { children?: React.ReactNode; type?: PillType; className?: string }) {
+    const type = props.type || "info";
+    const style = `px-2 py-1 text-sm uppercase rounded-xl ${PillClsMap[type]} ${props.className}`;
     return <span className={style}>{props.children}</span>;
 }