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 ( return (
<> <>
<progress class="progress" value={info.percentage} max="100" />
<div class="text-sm text-slate-500"> <div class="text-sm text-slate-500">
{`${info.used}`} / {`${info.total}`} ( {info.percentage}% ) {`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
</div> </div>
<div class="text-sm text-slate-500">Expire: {info.expireStr()} </div> <div class="text-sm text-slate-500">Expire: {info.expireStr()} </div>
</> </>
) )

View File

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