move all components to components dir

2026-02-16 18:06:39 +00:00 · 2025-09-04 11:18:42 -07:00
parent 4292d3262e
commit df85f13aea
90 changed files with 2166 additions and 86 deletions
--- a/src/components/SiteInfoCard.tsx
+++ b/src/components/SiteInfoCard.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { InfoIcon } from "lucide-react";
+import { useSiteContext } from "@app/hooks/useSiteContext";
+import {
+    InfoSection,
+    InfoSectionContent,
+    InfoSections,
+    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();
+
+    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");
+        }
+    };
+
+    return (
+        <Alert>
+            <AlertDescription>
+                <InfoSections cols={env.flags.enableClients ? 3 : 2}>
+                    {(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-gray-500 rounded-full"></div>
+                                            <span>{t("offline")}</span>
+                                        </div>
+                                    )}
+                                </InfoSectionContent>
+                            </InfoSection>
+                        </>
+                    )}
+                    <InfoSection>
+                        <InfoSectionTitle>
+                            {t("connectionType")}
+                        </InfoSectionTitle>
+                        <InfoSectionContent>
+                            {getConnectionTypeString(site.type)}
+                        </InfoSectionContent>
+                    </InfoSection>
+
+                    {env.flags.enableClients && site.type == "newt" && (
+                        <InfoSection>
+                            <InfoSectionTitle>Address</InfoSectionTitle>
+                            <InfoSectionContent>
+                                {site.address?.split("/")[0]}
+                            </InfoSectionContent>
+                        </InfoSection>
+                    )}
+                </InfoSections>
+            </AlertDescription>
+        </Alert>
+    );
+}