feat: refactor public note

src/components/ServerCardInline.tsx

@@ -2,11 +2,13 @@ import ServerFlag from "@/components/ServerFlag"
 import ServerUsageBar from "@/components/ServerUsageBar"
 import { formatBytes } from "@/lib/format"
 import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
-import { cn, formatNezhaInfo, getDaysBetweenDates, parsePublicNote } from "@/lib/utils"
+import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils"
 import { NezhaServer } from "@/types/nezha-api"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
+import PlanInfo from "./PlanInfo"
+import BillingInfo from "./billingInfo"
 import { Card } from "./ui/card"
 import { Separator } from "./ui/separator"
 
@@ -43,17 +45,6 @@ export default function ServerCardInline({
 
   const parsedData = parsePublicNote(public_note)
 
-  let daysLeft = 0
-  let isNeverExpire = false
-
-  if (parsedData?.billingDataMod?.endDate) {
-    if (parsedData.billingDataMod.endDate.startsWith("0000-00-00")) {
-      isNeverExpire = true
-    } else {
-      daysLeft = getDaysBetweenDates(parsedData.billingDataMod.endDate, new Date(now).toISOString())
-    }
-  }
-
   return online ? (
     <section>
       <Card
@@ -87,68 +78,11 @@ export default function ServerCardInline({
             >
               {name}
             </p>
-            {parsedData?.billingDataMod &&
-              (daysLeft >= 0 ? (
-                <>
-                  <p className={cn("text-[10px] text-muted-foreground")}>
-                    剩余时间: {isNeverExpire ? "永久" : daysLeft + "天"}
-                  </p>
-                  {parsedData.billingDataMod.amount &&
-                  parsedData.billingDataMod.amount !== "0" &&
-                  parsedData.billingDataMod.amount !== "-1" ? (
-                    <p className={cn("text-[10px] text-muted-foreground ")}>
-                      价格: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
-                    </p>
-                  ) : parsedData.billingDataMod.amount === "0" ? (
-                    <p className={cn("text-[10px] text-green-600 ")}>免费</p>
-                  ) : parsedData.billingDataMod.amount === "-1" ? (
-                    <p className={cn("text-[10px] text-pink-600 ")}>按量收费</p>
-                  ) : null}
-                </>
-              ) : (
-                <>
-                  <p className={cn("text-[10px] text-muted-foreground text-red-600")}>
-                    已过期: {daysLeft * -1} 天
-                  </p>
-                  {parsedData.billingDataMod.amount &&
-                  parsedData.billingDataMod.amount !== "0" &&
-                  parsedData.billingDataMod.amount !== "-1" ? (
-                    <p className={cn("text-[10px] text-muted-foreground ")}>
-                      价格: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
-                    </p>
-                  ) : parsedData.billingDataMod.amount === "0" ? (
-                    <p className={cn("text-[10px] text-green-600 ")}>免费</p>
-                  ) : parsedData.billingDataMod.amount === "-1" ? (
-                    <p className={cn("text-[10px] text-pink-600 ")}>按量收费</p>
-                  ) : null}
-                </>
-              ))}
-            {parsedData?.planDataMod && (
-              <section className="flex gap-1 items-center flex-wrap mt-0.5">
-                {parsedData.planDataMod.bandwidth !== "" && (
-                  <p
-                    className={cn(
-                      "text-[9px] bg-blue-600 dark:bg-blue-800 text-blue-200 dark:text-blue-300  w-fit rounded-[5px] px-[3px] py-[1.5px]",
-                    )}
-                  >
-                    {parsedData.planDataMod.bandwidth}
-                  </p>
-                )}
-                {parsedData.planDataMod.trafficVol !== "" && (
-                  <p
-                    className={cn(
-                      "text-[9px] bg-green-600 text-green-200 dark:bg-green-800 dark:text-green-300  w-fit rounded-[5px] px-[3px] py-[1.5px]",
-                    )}
-                  >
-                    {parsedData.planDataMod.trafficVol}
-                  </p>
-                )}
-              </section>
-            )}
+            {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
           </div>
         </section>
         <Separator orientation="vertical" className="h-8 mx-0 ml-2" />
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1">
           <section className={cn("grid grid-cols-9 items-center gap-3 flex-1")}>
             <div className={"items-center flex flex-row gap-2 whitespace-nowrap"}>
               <div className="text-xs font-semibold">
@@ -221,13 +155,14 @@ export default function ServerCardInline({
               </div>
             </div>
           </section>
+          {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
         </div>
       </Card>
     </section>
   ) : (
     <Card
       className={cn(
-        "flex  min-h-[61px] min-w-[900px] items-center justify-start gap-3 p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
+        "flex  min-h-[61px] min-w-[900px] items-center justify-start p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
         {
           "bg-card/50": customBackgroundImage,
         },
@@ -235,7 +170,7 @@ export default function ServerCardInline({
       onClick={() => navigate(`/server/${serverInfo.id}`)}
     >
       <section
-        className={cn("grid items-center gap-2 lg:w-40")}
+        className={cn("grid items-center gap-2 w-40")}
         style={{ gridTemplateColumns: "auto auto 1fr" }}
       >
         <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
@@ -253,66 +188,11 @@ export default function ServerCardInline({
           >
             {name}
           </p>
-          {parsedData?.billingDataMod &&
-            (daysLeft >= 0 ? (
-              <>
-                <p className={cn("text-[10px] text-muted-foreground")}>
-                  剩余时间: {isNeverExpire ? "永久" : daysLeft + "天"}
-                </p>
-                {parsedData.billingDataMod.amount &&
-                parsedData.billingDataMod.amount !== "0" &&
-                parsedData.billingDataMod.amount !== "-1" ? (
-                  <p className={cn("text-[10px] text-muted-foreground ")}>
-                    价格: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
-                  </p>
-                ) : parsedData.billingDataMod.amount === "0" ? (
-                  <p className={cn("text-[10px] text-green-600 ")}>免费</p>
-                ) : parsedData.billingDataMod.amount === "-1" ? (
-                  <p className={cn("text-[10px] text-pink-600 ")}>按量收费</p>
-                ) : null}
-              </>
-            ) : (
-              <>
-                <p className={cn("text-[10px] text-muted-foreground text-red-600")}>
-                  已过期: {daysLeft * -1} 天
-                </p>
-                {parsedData.billingDataMod.amount &&
-                parsedData.billingDataMod.amount !== "0" &&
-                parsedData.billingDataMod.amount !== "-1" ? (
-                  <p className={cn("text-[10px] text-muted-foreground ")}>
-                    价格: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
-                  </p>
-                ) : parsedData.billingDataMod.amount === "0" ? (
-                  <p className={cn("text-[10px] text-green-600 ")}>免费</p>
-                ) : parsedData.billingDataMod.amount === "-1" ? (
-                  <p className={cn("text-[10px] text-pink-600 ")}>按量收费</p>
-                ) : null}
-              </>
-            ))}
-          {parsedData?.planDataMod && (
-            <section className="flex gap-1 items-center flex-wrap mt-0.5">
-              {parsedData.planDataMod.bandwidth !== "" && (
-                <p
-                  className={cn(
-                    "text-[9px] bg-blue-600 dark:bg-blue-800 text-blue-200 dark:text-blue-300  w-fit rounded-[5px] px-[3px] py-[1.5px]",
-                  )}
-                >
-                  {parsedData.planDataMod.bandwidth}
-                </p>
-              )}
-              {parsedData.planDataMod.trafficVol !== "" && (
-                <p
-                  className={cn(
-                    "text-[9px] bg-green-600 text-green-200 dark:bg-green-800 dark:text-green-300  w-fit rounded-[5px] px-[3px] py-[1.5px]",
-                  )}
-                >
-                  {parsedData.planDataMod.trafficVol}
-                </p>
-              )}
-            </section>
-          )}
+          {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
         </div>
       </section>
+      <Separator orientation="vertical" className="h-8 ml-3 lg:ml-1 mr-3" />
+      {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
     </Card>
   )
 }