calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-07 04:47:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

show newt version on site

Browse Source
This commit is contained in:
miloschwartz
2026-05-01 16:26:45 -07:00
parent f8b85d4b4e
commit 9757c3d8b6
3 changed files with 128 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/SiteInfoCard.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { useSiteContext } from "@app/hooks/useSiteContext";
import {
InfoSection,
@@ -9,77 +9,137 @@ import {
InfoSectionTitle
} from "@app/components/InfoSection";
import { useTranslations } from "next-intl";
import { useEnvContext } from "@app/hooks/useEnvContext";
type SiteInfoCardProps = {};
export default function SiteInfoCard({}: SiteInfoCardProps) {
const { site, updateSite } = useSiteContext();
const t = useTranslations();
const { env } = useEnvContext();
function formatPublicEndpoint(endpoint: string) {
return endpoint.includes(":")
? endpoint.substring(0, endpoint.lastIndexOf(":"))
: endpoint;
}
const getConnectionTypeString = (type: string) => {
if (type === "newt") {
return "Newt";
} else if (type === "wireguard") {
return "WireGuard";
} else if (type === "local") {
return t("local");
} else {
return t("unknown");
}
};
export default function SiteInfoCard({}: SiteInfoCardProps) {
const { site } = useSiteContext();
const t = useTranslations();
const identifierSection = (
<InfoSection>
<InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
<InfoSectionContent>{site.niceId}</InfoSectionContent>
</InfoSection>
);
const statusSection = (
<InfoSection>
<InfoSectionTitle>{t("status")}</InfoSectionTitle>
<InfoSectionContent>
{site.online ? (
<div className="text-green-500 flex items-center space-x-2">
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
<span>{t("online")}</span>
</div>
) : (
<div className="text-neutral-500 flex items-center space-x-2">
<div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
<span>{t("offline")}</span>
</div>
)}
</InfoSectionContent>
</InfoSection>
);
const endpointSection = site.endpoint ? (
<InfoSection>
<InfoSectionTitle>{t("publicIpEndpoint")}</InfoSectionTitle>
<InfoSectionContent>
{formatPublicEndpoint(site.endpoint)}
</InfoSectionContent>
</InfoSection>
) : null;
if (site.type === "newt") {
return (
<Alert>
<AlertDescription>
<InfoSections cols={site.endpoint ? 5 : 4}>
{identifierSection}
{statusSection}
<InfoSection>
<InfoSectionTitle>
{t("connectionType")}
</InfoSectionTitle>
<InfoSectionContent>Newt</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>
{t("newtVersion")}
</InfoSectionTitle>
<InfoSectionContent>
{site.newtVersion
? `v${site.newtVersion}`
: "-"}
</InfoSectionContent>
</InfoSection>
{endpointSection}
</InfoSections>
</AlertDescription>
</Alert>
);
}
if (site.type === "wireguard") {
return (
<Alert>
<AlertDescription>
<InfoSections cols={site.endpoint ? 4 : 3}>
{identifierSection}
{statusSection}
<InfoSection>
<InfoSectionTitle>
{t("connectionType")}
</InfoSectionTitle>
<InfoSectionContent>WireGuard</InfoSectionContent>
</InfoSection>
{endpointSection}
</InfoSections>
</AlertDescription>
</Alert>
);
}
if (site.type === "local") {
return (
<Alert>
<AlertDescription>
<InfoSections cols={site.endpoint ? 3 : 2}>
{identifierSection}
<InfoSection>
<InfoSectionTitle>
{t("connectionType")}
</InfoSectionTitle>
<InfoSectionContent>
{t("local")}
</InfoSectionContent>
</InfoSection>
{endpointSection}
</InfoSections>
</AlertDescription>
</Alert>
);
}
return (
<Alert>
<AlertDescription>
<InfoSections cols={site.endpoint ? 4 : 3}>
<InfoSection>
<InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
<InfoSectionContent>{site.niceId}</InfoSectionContent>
</InfoSection>
{(site.type == "newt" || site.type == "wireguard") && (
<>
<InfoSection>
<InfoSectionTitle>
{t("status")}
</InfoSectionTitle>
<InfoSectionContent>
{site.online ? (
<div className="text-green-500 flex items-center space-x-2">
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
<span>{t("online")}</span>
</div>
) : (
<div className="text-neutral-500 flex items-center space-x-2">
<div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
<span>{t("offline")}</span>
</div>
)}
</InfoSectionContent>
</InfoSection>
</>
)}
<InfoSections cols={site.endpoint ? 3 : 2}>
{identifierSection}
<InfoSection>
<InfoSectionTitle>
{t("connectionType")}
</InfoSectionTitle>
<InfoSectionContent>
{getConnectionTypeString(site.type)}
</InfoSectionContent>
<InfoSectionContent>{t("unknown")}</InfoSectionContent>
</InfoSection>
{site.endpoint && (
<InfoSection>
<InfoSectionTitle>
{t("publicIpEndpoint")}
</InfoSectionTitle>
<InfoSectionContent>
{site.endpoint.includes(":")
? site.endpoint.substring(0, site.endpoint.lastIndexOf(":"))
: site.endpoint}
</InfoSectionContent>
</InfoSection>
)}
{endpointSection}
</InfoSections>
</AlertDescription>
</Alert>