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,9 +130,10 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe })
</Card> </Card>
</Link> </Link>
) : ( ) : (
<Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
<Card <Card
className={cn( className={cn(
"flex flex-col items-center justify-start gap-3 p-3 md:px-5", "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]", showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
{ {
"flex-col": fixedTopServerName, "flex-col": fixedTopServerName,
@ -148,16 +149,22 @@ export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe })
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span> <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
<div <div
className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")} className={cn(
"flex items-center justify-center",
showFlag ? "min-w-[17px]" : "min-w-0",
)}
> >
{showFlag ? <ServerFlag country_code={country_code} /> : null} {showFlag ? <ServerFlag country_code={country_code} /> : null}
</div> </div>
<div className="relative"> <div className="relative">
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}> <p
className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}
>
{name} {name}
</p> </p>
</div> </div>
</section> </section>
</Card> </Card>
</Link>
) )
} }