https://dev.kronoz.win/r/marzneshin.git
| 1 |
ab3442f |
Mrdn |
2y ago |
import { FC } from 'react' |
| 2 |
ab3442f |
Mrdn |
2y ago |
import { UserType } from '@marzneshin/features/users'; |
| 3 |
ab3442f |
Mrdn |
2y ago |
import { CircularProgress } from '@nextui-org/progress'; |
| 4 |
ab3442f |
Mrdn |
2y ago |
import prettyBytes from 'pretty-bytes'; |
| 5 |
1820073 |
Mrdn |
2y ago |
import { useTranslation } from 'react-i18next'; |
| 6 |
ab3442f |
Mrdn |
2y ago |
|
| 7 |
ab3442f |
Mrdn |
2y ago |
|
| 8 |
ab3442f |
Mrdn |
2y ago |
interface UserUsedTrafficProps { |
| 9 |
ab3442f |
Mrdn |
2y ago |
user: UserType |
| 10 |
ab3442f |
Mrdn |
2y ago |
} |
| 11 |
ab3442f |
Mrdn |
2y ago |
|
| 12 |
ab3442f |
Mrdn |
2y ago |
export const UserUsedTraffic: FC<UserUsedTrafficProps> = ( |
| 13 |
ab3442f |
Mrdn |
2y ago |
{ user } |
| 14 |
ab3442f |
Mrdn |
2y ago |
) => { |
| 15 |
1820073 |
Mrdn |
2y ago |
const { t } = useTranslation() |
| 16 |
ab3442f |
Mrdn |
2y ago |
return ( |
| 17 |
1820073 |
Mrdn |
2y ago |
<div className="flex gap-x-5 justify-start items-center"> |
| 18 |
1820073 |
Mrdn |
2y ago |
<CircularProgress |
| 19 |
1820073 |
Mrdn |
2y ago |
value={user.data_limit ? (user.used_traffic / user.data_limit * 100) : 0} |
| 20 |
1820073 |
Mrdn |
2y ago |
size='sm' |
| 21 |
1820073 |
Mrdn |
2y ago |
showValueLabel |
| 22 |
1820073 |
Mrdn |
2y ago |
/> |
| 23 |
1820073 |
Mrdn |
2y ago |
<div> |
| 24 |
1820073 |
Mrdn |
2y ago |
<p className="text-sm font-medium text-gray-900 dark:text-gray-50"> |
| 25 |
1820073 |
Mrdn |
2y ago |
{prettyBytes(user.used_traffic)} |
| 26 |
1820073 |
Mrdn |
2y ago |
</p> |
| 27 |
1820073 |
Mrdn |
2y ago |
<p className="text-sm text-gray-500 dark:text-gray-500"> |
| 28 |
1820073 |
Mrdn |
2y ago |
{user.data_limit ? prettyBytes(user.data_limit) : t('page.users.unlimited')} |
| 29 |
1820073 |
Mrdn |
2y ago |
</p> |
| 30 |
ab3442f |
Mrdn |
2y ago |
</div> |
| 31 |
1820073 |
Mrdn |
2y ago |
</div> |
| 32 |
ab3442f |
Mrdn |
2y ago |
); |
| 33 |
ab3442f |
Mrdn |
2y ago |
} |