43 lines
936 B
TypeScript
43 lines
936 B
TypeScript
import { VariantProps, cva } from "class-variance-authority";
|
|
import styles from "./styles.module.css";
|
|
|
|
const statusVariants = cva(styles.statusIndicator, {
|
|
variants: {
|
|
variant: {
|
|
default: styles.statusDefault,
|
|
connecting: styles.statusOrange,
|
|
connected: styles.statusGreen,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
});
|
|
|
|
export interface StatusProps
|
|
extends React.HTMLAttributes<HTMLElement>,
|
|
VariantProps<typeof statusVariants> {}
|
|
|
|
const status_text = {
|
|
default: "Idle",
|
|
connecting: "Connecting",
|
|
connected: "Connected",
|
|
};
|
|
|
|
export const Status: React.FC<StatusProps> = ({
|
|
children,
|
|
variant = "default",
|
|
}) => {
|
|
return (
|
|
<div className={styles.status}>
|
|
<span>{children}</span>
|
|
<div className={statusVariants({ variant })}>
|
|
<span />
|
|
{status_text[variant as keyof typeof status_text]}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Status;
|