Add badge style component

Author: LanesGood

src/components/badge.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+export default function Badge({ name, color, children }) {
+  return (
+    <span className='badge'>
+      {children}
+      {name}
+      <style jsx>
+        {`
+          .badge {
+            font-size: 0.75rem;
+            background: ${color};
+            display: inline-flex;
+            align-items: center;
+            padding: 0.125rem 0.5rem;
+            border-radius: 999px;
+            font-size: 12px;
+            line-height: 1.5;
+            white-space: nowrap;
+            margin-right: 4px;
+          }
+        `}
+      </style>
+    </span>
+  )
+}

src/components/tables/users.js

@@ -1,5 +1,6 @@
 import T from 'prop-types'
 import Table from './table'
+import Badge from '../badge'
 import { useFetchList } from '../../hooks/use-fetch-list'
 import { useState } from 'react'
 import Pagination from '../pagination'
@@ -38,7 +39,11 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
           render: ({ badges }) => (
             <>
               {badges?.length > 0 &&
-                badges.map((b) => <div key={b.id}>{b.name}</div>)}
+                badges.map((b) => (
+                  <Badge color={b.color} key={b.id}>
+                    {b.name}
+                  </Badge>
+                ))}
             </>
           ),
         },