feat(faucet): act-1391 - added badge component (#1425)

* feat(faucet): act-1391 - added badge component

* feat(faucet): act-1391 - fix for css vars

src/components/Badge/badge.module.scss

@@ -0,0 +1,45 @@
+:root {
+  --badge-default-color: #6A737D;
+  --badge-default-bg-color: #F2F4F6;
+  --badge-default-border-color: transparent;
+  --badge-success-color: #1C8234;
+  --badge-success-bg-color: rgba(28, 130, 52, 0.1);
+  --badge-error-color: #D73847;
+  --badge-error-bg-color: rgba(215, 56, 71, 0.1);
+}
+
+:root[data-theme='dark'] {
+  --badge-default-color: #BBC0C5;
+  --badge-default-bg-color: #24272A;
+  --badge-default-border-color: #BBC0C5;
+  --badge-success-color: #28A745;
+  --badge-success-bg-color: rgba(40, 167, 69, 0.15);
+  --badge-error-color: #E06470;
+  --badge-error-bg-color: rgba(224, 100, 112, 0.15);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  border-radius: 999px;
+  border: 1px solid var(--badge-default-border-color);
+  padding: 2px 8px;
+  color: var(--badge-default-color);
+  background-color: var(--badge-default-bg-color);
+
+  &.success {
+    color: var(--badge-success-color);
+    background-color: var(--badge-success-bg-color);
+    border-color: transparent;
+  }
+
+  &.error {
+    color: var(--badge-error-color);
+    background-color: var(--badge-error-bg-color);
+    border-color: transparent;
+  }
+}

src/components/Badge/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "./badge.module.scss";
+import clsx from "clsx";
+
+type variant = "error" | "success" | "default"
+
+interface IBadge {
+  variant?: variant;
+  label: string;
+}
+
+export default function Badge({ variant = "default", label }: IBadge) {
+  return (
+    <span className={clsx(styles.badge, styles[variant])}>
+      {label}
+    </span>
+  );
+}

src/pages/developer-tools/faucet.tsx

@@ -4,6 +4,7 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import styles from "./faucet.module.scss";
 import Button from "@site/src/components/Button";
+import Badge from "@site/src/components/Badge";
 import { Faq } from "@site/src/components/Faucet";
 import { useAlert } from "react-alert";
 import { AlertCommonIssue, AlertCooldown, AlertSuccess } from "@site/src/components/Faucet";
@@ -34,6 +35,11 @@ export default function Faucet() {
             default
           >
             <div>Ethereum Sepolia</div>
+            <ul>
+              <li><Badge variant="success" label="Successful" /></li>
+              <li><Badge variant="error" label="Failed" /></li>
+              <li><Badge label="Pending" /></li>
+            </ul>
             <Faq network="sepolia" className={styles.faq}></Faq>
           </TabItem>
           <TabItem