feat: offline card link

This commit is contained in:
hamster1963 2024-12-24 11:42:59 +08:00
parent 14b12bf8e0
commit 682e4ccfe0
2 changed files with 43 additions and 36 deletions

View File

@ -23,7 +23,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
return ( return (
<> <>
<section className="flex flex-wrap gap-2 mb-4"> <section className="flex flex-wrap gap-2 mb-4">
{data.asn.autonomous_system_organization && ( {data.asn?.autonomous_system_organization && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -33,7 +33,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.asn.autonomous_system_number && ( {data.asn?.autonomous_system_number && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -43,7 +43,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.city.registered_country?.names.en && ( {data.city?.registered_country?.names.en && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -53,7 +53,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.city.country?.iso_code && ( {data.city?.country?.iso_code && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -63,7 +63,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.city.city?.names.en && ( {data.city?.city?.names.en && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -73,7 +73,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.city.location?.longitude && ( {data.city?.location?.longitude && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -83,7 +83,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.city.location?.latitude && ( {data.city?.location?.latitude && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -93,7 +93,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.city.location?.time_zone && ( {data.city?.location?.time_zone && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
@ -103,7 +103,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
</CardContent> </CardContent>
</Card> </Card>
)} )}
{data.city.postal && ( {data.city?.postal && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">

View File

@ -130,34 +130,41 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe })
</Card> </Card>
</Link> </Link>
) : ( ) : (
<Card <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
className={cn( <Card
"flex flex-col items-center justify-start gap-3 p-3 md:px-5", className={cn(
showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]", "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
{ showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
"flex-col": fixedTopServerName, {
"lg:flex-row": !fixedTopServerName, "flex-col": fixedTopServerName,
}, "lg:flex-row": !fixedTopServerName,
)} },
> )}
<section
className={cn("grid items-center gap-2", {
"lg:w-40": !fixedTopServerName,
})}
style={{ gridTemplateColumns: "auto auto 1fr" }}
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span> <section
<div className={cn("grid items-center gap-2", {
className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")} "lg:w-40": !fixedTopServerName,
})}
style={{ gridTemplateColumns: "auto auto 1fr" }}
> >
{showFlag ? <ServerFlag country_code={country_code} /> : null} <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
</div> <div
<div className="relative"> className={cn(
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}> "flex items-center justify-center",
{name} showFlag ? "min-w-[17px]" : "min-w-0",
</p> )}
</div> >
</section> {showFlag ? <ServerFlag country_code={country_code} /> : null}
</Card> </div>
<div className="relative">
<p
className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}
>
{name}
</p>
</div>
</section>
</Card>
</Link>
) )
} }