From 24bfaddfc80f0373c181ea873fdc39885f67fe58 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Fri, 1 Sep 2023 13:45:30 +0800
Subject: [PATCH] feat: show subscription usage in a progress bar

---
 src/components/SubscriptionInfo.tsx | 3 +++
 src/pages/Proxies.tsx               | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SubscriptionInfo.tsx b/src/components/SubscriptionInfo.tsx
index 8eb9405..06b40a9 100644
--- a/src/components/SubscriptionInfo.tsx
+++ b/src/components/SubscriptionInfo.tsx
@@ -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>
     </>
   )
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 1896ec9..a3e8b83 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -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) =>