From 98dcbd506b19836b7a2a0e18e80ff9483bd5c4aa Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Tue, 24 Dec 2024 14:59:17 +0800
Subject: [PATCH] feat: fixedTopServerName show billingInfo inline

---
 src/components/ServerCard.tsx  | 32 ++++++++++++++++++++++++++++----
 src/components/billingInfo.tsx | 12 ++++++------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 2b9a0b1..9a723e9 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -60,10 +60,22 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
         </div>
         <div className="relative flex flex-col">
           <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}>{name}</p>
-          <div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
+          <div
+            className={cn("hidden lg:block", {
+              "lg:hidden": fixedTopServerName,
+            })}
+          >
+            {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
+          </div>
         </div>
       </section>
-      <div className="flex items-center gap-2 -mt-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
+      <div
+        className={cn("flex items-center gap-2 -mt-2 lg:hidden", {
+          "lg:flex": fixedTopServerName,
+        })}
+      >
+        {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
+      </div>
       <div className="flex flex-col lg:items-start items-center gap-2">
         <section
           className={cn("grid grid-cols-5 items-center gap-3", {
@@ -159,10 +171,22 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
         </div>
         <div className="relative flex flex-col">
           <p className={cn("break-all font-bold tracking-tight max-w-[108px]", showFlag ? "text-xs" : "text-sm")}>{name}</p>
-          <div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
+          <div
+            className={cn("hidden lg:block", {
+              "lg:hidden": fixedTopServerName,
+            })}
+          >
+            {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
+          </div>
         </div>
       </section>
-      <div className="flex items-center gap-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
+      <div
+        className={cn("flex items-center gap-2 lg:hidden", {
+          "lg:flex": fixedTopServerName,
+        })}
+      >
+        {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
+      </div>
       {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
     </Card>
   )
diff --git a/src/components/billingInfo.tsx b/src/components/billingInfo.tsx
index e680eb0..e796f50 100644
--- a/src/components/billingInfo.tsx
+++ b/src/components/billingInfo.tsx
@@ -35,9 +35,6 @@ export default function BillingInfo({ parsedData }: { parsedData: PublicNoteData
 
   return daysLeftObject.days >= 0 ? (
     <>
-      <div className={cn("text-[10px] text-muted-foreground")}>
-        {t("billingInfo.remaining")}: {isNeverExpire ? t("billingInfo.indefinite") : daysLeftObject.days + " " + t("billingInfo.days")}
-      </div>
       {parsedData.billingDataMod.amount && parsedData.billingDataMod.amount !== "0" && parsedData.billingDataMod.amount !== "-1" ? (
         <p className={cn("text-[10px] text-muted-foreground ")}>
           {t("billingInfo.price")}: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
@@ -47,13 +44,13 @@ export default function BillingInfo({ parsedData }: { parsedData: PublicNoteData
       ) : parsedData.billingDataMod.amount === "-1" ? (
         <p className={cn("text-[10px] text-pink-600 ")}>{t("billingInfo.usage-baseed")}</p>
       ) : null}
+      <div className={cn("text-[10px] text-muted-foreground")}>
+        {t("billingInfo.remaining")}: {isNeverExpire ? t("billingInfo.indefinite") : daysLeftObject.days + " " + t("billingInfo.days")}
+      </div>
       <RemainPercentBar className="mt-0.5" value={daysLeftObject.remainingPercentage * 100} />
     </>
   ) : (
     <>
-      <p className={cn("text-[10px] text-muted-foreground text-red-600")}>
-        {t("billingInfo.expired")}: {daysLeftObject.days * -1} {t("billingInfo.days")}
-      </p>
       {parsedData.billingDataMod.amount && parsedData.billingDataMod.amount !== "0" && parsedData.billingDataMod.amount !== "-1" ? (
         <p className={cn("text-[10px] text-muted-foreground ")}>
           {t("billingInfo.price")}: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
@@ -63,6 +60,9 @@ export default function BillingInfo({ parsedData }: { parsedData: PublicNoteData
       ) : parsedData.billingDataMod.amount === "-1" ? (
         <p className={cn("text-[10px] text-pink-600 ")}>{t("billingInfo.usage-baseed")}</p>
       ) : null}
+      <p className={cn("text-[10px] text-muted-foreground text-red-600")}>
+        {t("billingInfo.expired")}: {daysLeftObject.days * -1} {t("billingInfo.days")}
+      </p>
     </>
   )
 }