/
SeatsCapUsage.tsx
36 lines (32 loc) · 1.15 KB
/
SeatsCapUsage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { ProgressBar, Box } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import React, { ReactElement } from 'react';
type SeatsCapUsageProps = {
limit: number;
members: number;
};
const SeatsCapUsage = ({ limit, members }: SeatsCapUsageProps): ReactElement => {
const t = useTranslation();
const percentage = Math.max(0, Math.min((100 / limit) * members, 100));
const closeToLimit = percentage >= 80;
const reachedLimit = percentage >= 100;
const color = closeToLimit ? 'danger-500' : 'success-500';
const seatsLeft = Math.max(0, limit - members);
return (
<Box display='flex' flexDirection='column' minWidth='x180'>
<Box
color={reachedLimit ? color : 'default'}
display='flex'
flexDirection='row'
justifyContent='space-between'
fontScale='c1'
mb='x8'
>
<div data-qa-id='seats-available'>{t('Seats_Available', { seatsLeft })}</div>
<Box color={reachedLimit ? color : 'hint'}>{`${members}/${limit}`}</Box>
</Box>
<ProgressBar borderRadius='x8' overflow='hidden' percentage={percentage} barColor={color} animated={false} w='full' />
</Box>
);
};
export default SeatsCapUsage;