Skip to content

Commit

Permalink
feat(faucet): act-1391 - added badge component (#1425)
Browse files Browse the repository at this point in the history
* feat(faucet): act-1391 - added badge component

* feat(faucet): act-1391 - fix for css vars
  • Loading branch information
TrofimovAnton85 authored Jul 18, 2024
1 parent 5ed2df2 commit 1e9b628
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 0 deletions.
45 changes: 45 additions & 0 deletions src/components/Badge/badge.module.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
18 changes: 18 additions & 0 deletions src/components/Badge/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
6 changes: 6 additions & 0 deletions src/pages/developer-tools/faucet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 1e9b628

Please sign in to comment.