fix: add Badge and export all ui elements

packages/react-dashboard/src/components/form/index.tsx

@@ -0,0 +1,3 @@
+export * from "./FormSection/FormSection";
+export * from "./ImageField/ImageField";
+export * from "./CryptoAmountField/CryptoAmountField";

packages/react-dashboard/src/components/index.ts

@@ -1,4 +1,2 @@
-export * from "./form/FormSection/FormSection";
-export * from "./form/ImageField/ImageField";
-export * from "./form/CryptoAmountField/CryptoAmountField";
-export * from "./ui/CodeBlock/CodeBlock";
+export * from "./form";
+export * from "./ui";

packages/react-dashboard/src/components/ui/Badge.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+type Props = {
+  color: string;
+  text: string;
+};
+
+export const Badge = (props: Props) => {
+  // initialization
+  const { text, color } = props;
+
+  // views
+  return (
+    <span
+      className={`inline-flex mr-4 items-center rounded-full text-xs font-medium h-6 px-2.5 py-0.5 bg-${color}-100 bg-opacity-75 text-${color}-800`}
+    >
+      <svg
+        className={`-ml-0.5 mr-1.5 h-2 w-2 text-${color}-800`}
+        fill="currentColor"
+        viewBox="0 0 8 8"
+      >
+        <circle cx={4} cy={4} r={3} />
+      </svg>
+      {text}
+    </span>
+  );
+};

packages/react-dashboard/src/components/ui/Button.tsx

@@ -9,7 +9,7 @@ export const SECONDARY =
 export const ACTION =
   'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed';
 
-export interface Props {
+interface Props {
   text: string;
   icon?: ReactNode;
   className?: string;

packages/react-dashboard/src/components/ui/Errors.tsx

@@ -5,7 +5,7 @@ import {
   translateContractError,
 } from '../../utils/errors';
 
-export interface Props {
+interface Props {
   error?: string | string[] | null | Error | any;
 }
 

packages/react-dashboard/src/components/ui/index.tsx

@@ -0,0 +1,5 @@
+export * from './Badge';
+export * from './CodeBlock/CodeBlock';
+export * from './Button';
+export * from './Errors';
+export * from './Spinner';

packages/react-dashboard/src/index.ts

@@ -1 +1,2 @@
-export * from './components';
+export * from './components';
+export * from './utils';