feat: fixedTopServerName show billingInfo inline

This commit is contained in:
hamster1963
2024-12-24 14:59:17 +08:00
parent 427f1e9d7f
commit 98dcbd506b
2 changed files with 34 additions and 10 deletions

View File

@@ -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>
)