feat: fixedTopServerName show billingInfo inline

hamster1963 · Dec 24, 2024 · 98dcbd5 · 98dcbd5
1 parent 427f1e9
commit 98dcbd5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git 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
@@ -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>
     </>
   )
 }