feat: show subscription usage in a progress bar

This commit is contained in:
kunish 2023-09-01 13:45:30 +08:00
parent f5d65eb018
commit 24bfaddfc8
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
2 changed files with 5 additions and 2 deletions

View File

@ -34,9 +34,12 @@ export default (props: { subscriptionInfo: SubscriptionInfo }) => {
return (
<>
<progress class="progress" value={info.percentage} max="100" />
<div class="text-sm text-slate-500">
{`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
</div>
<div class="text-sm text-slate-500">Expire: {info.expireStr()} </div>
</>
)

View File

@ -124,7 +124,7 @@ export default () => {
{(proxyProvider) => {
const title = (
<div class="flex items-center justify-between">
<div class="flex flex-col">
<div class="flex flex-col gap-1">
<span>{proxyProvider.name}</span>
<SubscriptionInfo
subscriptionInfo={proxyProvider.subscriptionInfo}
@ -135,7 +135,7 @@ export default () => {
</div>
</div>
<div>
<div class="flex flex-nowrap">
<button
class="btn btn-circle btn-sm mr-2"
onClick={(e) =>