Limit badges column to 3 badges in users table

Author: LanesGood

src/components/badge.js

@@ -12,9 +12,12 @@ const hexToRgb = (hex) =>
     .map((x) => parseInt(x, 16))
     .join()
 
-export default function Badge({ name, color, children }) {
+export default function Badge({ name, color, dot, children }) {
+  let classes = [`badge`]
+  if (dot) classes.push('dot')
+  let classNames = classes.join(' ')
   return (
-    <span className='badge'>
+    <span className={classNames}>
       {children}
       {name}
       <style jsx>
@@ -30,10 +33,11 @@ export default function Badge({ name, color, children }) {
             font-size: 12px;
             white-space: nowrap;
             margin-right: 4px;
+            line-height: initial;
             position: relative;
             overflow: hidden;
           }
-          .badge::before {
+          .badge.dot::before {
             content: '';
             background-color: ${color};
             box-shadow: 0 0 0 1px ${theme.colors.primaryLite};

src/components/tables/users.js

@@ -15,7 +15,7 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
     key: 'name',
     direction: 'asc',
   })
-
+  const MAX_BADGES_COLUMN = 3
   let apiBasePath
   let emptyMessage
   let columns
@@ -39,11 +39,16 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
           render: ({ badges }) => (
             <>
               {badges?.length > 0 &&
-                badges.map((b) => (
-                  <Badge color={b.color} key={b.id}>
+                badges.slice(0, MAX_BADGES_COLUMN).map((b) => (
+                  <Badge dot color={b.color} key={b.id}>
                     {b.name}
                   </Badge>
                 ))}
+              {badges?.length > MAX_BADGES_COLUMN && (
+                <Badge color='#222'>
+                  +{badges.slice(MAX_BADGES_COLUMN).length}
+                </Badge>
+              )}
             </>
           ),
         },