♻️ move newt install commands to its own component for reusing in details

src/components/commands.tsx

@@ -1,174 +0,0 @@
-import { useTranslations } from "next-intl";
-import CopyTextBox from "./CopyTextBox";
-
-import type { id } from "date-fns/locale";
-
-// function getCommand():  CommandItem[] {
-//     const placeholder: CommandItem[] = [t("unknownCommand")];
-//     if (!commands) {
-//         return placeholder;
-//     }
-//     let platformCommands = commands[platform as keyof Commands];
-
-//     if (!platformCommands) {
-//         // get first key
-//         const firstPlatform = Object.keys(commands)[0] as Platform;
-//         platformCommands = commands[firstPlatform as keyof Commands];
-
-//         setPlatform(firstPlatform);
-//     }
-
-//     let architectureCommands = platformCommands[architecture];
-//     if (!architectureCommands) {
-//         // get first key
-//         const firstArchitecture = Object.keys(platformCommands)[0];
-//         architectureCommands = platformCommands[firstArchitecture];
-
-//         setArchitecture(firstArchitecture);
-//     }
-
-//     return architectureCommands || placeholder;
-// };
-
-export type CommandItem = string | { title: string; command: string };
-
-type CommandByPlatform = {
-    unix: Record<string, CommandItem[]>;
-    windows: Record<string, CommandItem[]>;
-    docker: Record<string, CommandItem[]>;
-    kubernetes: Record<string, CommandItem[]>;
-    podman: Record<string, CommandItem[]>;
-    nixos: Record<string, CommandItem[]>;
-};
-type Platform = keyof CommandByPlatform;
-
-export type SiteCommandsProps = {
-    id: string;
-    secret: string;
-    endpoint: string;
-    version: string;
-    acceptClients: boolean;
-    platform: Platform;
-};
-
-export function SiteCommands({
-    acceptClients,
-    id,
-    secret,
-    endpoint,
-    version,
-    platform
-}: SiteCommandsProps) {
-    const t = useTranslations();
-
-    const acceptClientsFlag = !acceptClients ? " --disable-clients" : "";
-    const acceptClientsEnv = !acceptClients
-        ? "\n      - DISABLE_CLIENTS=true"
-        : "";
-
-    const commandList: Record<Platform, Record<string, CommandItem[]>> = {
-        unix: {
-            All: [
-                {
-                    title: t("install"),
-                    command: `curl -fsSL https://static.pangolin.net/get-newt.sh | bash`
-                },
-                {
-                    title: t("run"),
-                    command: `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                }
-            ]
-        },
-        windows: {
-            x64: [
-                {
-                    title: t("install"),
-                    command: `curl -o newt.exe -L "https://github.com/fosrl/newt/releases/download/${version}/newt_windows_amd64.exe"`
-                },
-                {
-                    title: t("run"),
-                    command: `newt.exe --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                }
-            ]
-        },
-        docker: {
-            "Docker Compose": [
-                `services:
-  newt:
-    image: fosrl/newt
-    container_name: newt
-    restart: unless-stopped
-    environment:
-      - PANGOLIN_ENDPOINT=${endpoint}
-      - NEWT_ID=${id}
-      - NEWT_SECRET=${secret}${acceptClientsEnv}`
-            ],
-            "Docker Run": [
-                `docker run -dit fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-            ]
-        },
-        kubernetes: {
-            "Helm Chart": [
-                `helm repo add fossorial https://charts.fossorial.io`,
-                `helm repo update fossorial`,
-                `helm install newt fossorial/newt \\
-    --create-namespace \\
-    --set newtInstances[0].name="main-tunnel" \\
-    --set-string newtInstances[0].auth.keys.endpointKey="${endpoint}" \\
-    --set-string newtInstances[0].auth.keys.idKey="${id}" \\
-    --set-string newtInstances[0].auth.keys.secretKey="${secret}"`
-            ]
-        },
-        podman: {
-            "Podman Quadlet": [
-                `[Unit]
-Description=Newt container
-
-[Container]
-ContainerName=newt
-Image=docker.io/fosrl/newt
-Environment=PANGOLIN_ENDPOINT=${endpoint}
-Environment=NEWT_ID=${id}
-Environment=NEWT_SECRET=${secret}${!acceptClients ? "\nEnvironment=DISABLE_CLIENTS=true" : ""}
-# Secret=newt-secret,type=env,target=NEWT_SECRET
-
-[Service]
-Restart=always
-
-[Install]
-WantedBy=default.target`
-            ],
-            "Podman Run": [
-                `podman run -dit docker.io/fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-            ]
-        },
-        nixos: {
-            All: [
-                `nix run 'nixpkgs#fosrl-newt' -- --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-            ]
-        }
-    };
-
-    const commands = commandList[platform];
-
-    return (
-        <div className="mt-2 flex flex-col gap-3">
-            {[].map((item, index) => {
-                const commandText =
-                    typeof item === "string" ? item : item.command;
-                const title = typeof item === "string" ? undefined : item.title;
-
-                return (
-                    <div key={index}>
-                        {title && (
-                            <p className="text-sm font-medium mb-1.5">
-                                {title}
-                            </p>
-                        )}
-                        <CopyTextBox text={commandText} outline={true} />
-                    </div>
-                );
-            })}
-        </div>
-    );
-}

src/components/newt-install-commands.tsx

@@ -0,0 +1,315 @@
+import { useTranslations } from "next-intl";
+import CopyTextBox from "./CopyTextBox";
+import {
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "./Settings";
+import { CheckboxWithLabel } from "./ui/checkbox";
+import { Button } from "./ui/button";
+import { useState } from "react";
+import { FaCubes, FaDocker, FaWindows } from "react-icons/fa";
+import { Terminal } from "lucide-react";
+import { SiKubernetes, SiNixos } from "react-icons/si";
+
+export type CommandItem = string | { title: string; command: string };
+
+const PLATFORMS = [
+    "unix",
+    "windows",
+    "docker",
+    "kubernetes",
+    "podman",
+    "nixos"
+] as const;
+
+type Platform = (typeof PLATFORMS)[number];
+
+export type NewtSiteInstallCommandsProps = {
+    id: string;
+    secret: string;
+    endpoint: string;
+    version: string;
+};
+
+export function NewtSiteInstallCommands({
+    id,
+    secret,
+    endpoint,
+    version
+}: NewtSiteInstallCommandsProps) {
+    const t = useTranslations();
+
+    const [platform, setPlatform] = useState<Platform>("unix");
+    const [acceptClients, setAcceptClients] = useState(true);
+
+    const acceptClientsFlag = !acceptClients ? " --disable-clients" : "";
+    const acceptClientsEnv = !acceptClients
+        ? "\n      - DISABLE_CLIENTS=true"
+        : "";
+
+    const commandList: Record<Platform, Record<string, CommandItem[]>> = {
+        unix: {
+            All: [
+                {
+                    title: t("install"),
+                    command: `curl -fsSL https://static.pangolin.net/get-newt.sh | bash`
+                },
+                {
+                    title: t("run"),
+                    command: `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
+                }
+            ]
+        },
+        windows: {
+            x64: [
+                {
+                    title: t("install"),
+                    command: `curl -o newt.exe -L "https://github.com/fosrl/newt/releases/download/${version}/newt_windows_amd64.exe"`
+                },
+                {
+                    title: t("run"),
+                    command: `newt.exe --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
+                }
+            ]
+        },
+        docker: {
+            "Docker Compose": [
+                `services:
+  newt:
+    image: fosrl/newt
+    container_name: newt
+    restart: unless-stopped
+    environment:
+      - PANGOLIN_ENDPOINT=${endpoint}
+      - NEWT_ID=${id}
+      - NEWT_SECRET=${secret}${acceptClientsEnv}`
+            ],
+            "Docker Run": [
+                `docker run -dit fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
+            ]
+        },
+        kubernetes: {
+            "Helm Chart": [
+                `helm repo add fossorial https://charts.fossorial.io`,
+                `helm repo update fossorial`,
+                `helm install newt fossorial/newt \\
+    --create-namespace \\
+    --set newtInstances[0].name="main-tunnel" \\
+    --set-string newtInstances[0].auth.keys.endpointKey="${endpoint}" \\
+    --set-string newtInstances[0].auth.keys.idKey="${id}" \\
+    --set-string newtInstances[0].auth.keys.secretKey="${secret}"`
+            ]
+        },
+        podman: {
+            "Podman Quadlet": [
+                `[Unit]
+Description=Newt container
+
+[Container]
+ContainerName=newt
+Image=docker.io/fosrl/newt
+Environment=PANGOLIN_ENDPOINT=${endpoint}
+Environment=NEWT_ID=${id}
+Environment=NEWT_SECRET=${secret}${!acceptClients ? "\nEnvironment=DISABLE_CLIENTS=true" : ""}
+# Secret=newt-secret,type=env,target=NEWT_SECRET
+
+[Service]
+Restart=always
+
+[Install]
+WantedBy=default.target`
+            ],
+            "Podman Run": [
+                `podman run -dit docker.io/fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
+            ]
+        },
+        nixos: {
+            All: [
+                `nix run 'nixpkgs#fosrl-newt' -- --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
+            ]
+        }
+    };
+
+    const [architecture, setArchitecture] = useState(
+        () => getArchitectures(platform)[0]
+    );
+
+    const commands = commandList[platform][architecture];
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>
+                    {t("siteInstallNewt")}
+                </SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("siteInstallNewtDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            <SettingsSectionBody>
+                <div>
+                    <p className="font-bold mb-3">{t("operatingSystem")}</p>
+                    <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
+                        {PLATFORMS.map((os) => (
+                            <Button
+                                key={os}
+                                variant={
+                                    platform === os
+                                        ? "squareOutlinePrimary"
+                                        : "squareOutline"
+                                }
+                                className={`flex-1 min-w-30 ${platform === os ? "bg-primary/10" : ""} shadow-none`}
+                                onClick={() => {
+                                    setPlatform(os);
+                                    const architectures = getArchitectures(os);
+                                    setArchitecture(architectures[0]);
+                                }}
+                            >
+                                {getPlatformIcon(os)}
+                                {getPlatformName(os)}
+                            </Button>
+                        ))}
+                    </div>
+                </div>
+
+                <div>
+                    <p className="font-bold mb-3">
+                        {["docker", "podman"].includes(platform)
+                            ? t("method")
+                            : t("architecture")}
+                    </p>
+                    <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
+                        {getArchitectures(platform).map((arch) => (
+                            <Button
+                                key={arch}
+                                variant={
+                                    architecture === arch
+                                        ? "squareOutlinePrimary"
+                                        : "squareOutline"
+                                }
+                                className={`flex-1 min-w-30 ${architecture === arch ? "bg-primary/10" : ""} shadow-none`}
+                                onClick={() => setArchitecture(arch)}
+                            >
+                                {arch}
+                            </Button>
+                        ))}
+                    </div>
+
+                    <div className="pt-4">
+                        <p className="font-bold mb-3">
+                            {t("siteConfiguration")}
+                        </p>
+                        <div className="flex items-center space-x-2 mb-2">
+                            <CheckboxWithLabel
+                                id="acceptClients"
+                                aria-describedby="acceptClients-desc"
+                                checked={acceptClients}
+                                onCheckedChange={(checked) => {
+                                    const value = checked as boolean;
+                                    setAcceptClients(value);
+                                }}
+                                label={t("siteAcceptClientConnections")}
+                            />
+                        </div>
+                        <p
+                            id="acceptClients-desc"
+                            className="text-sm text-muted-foreground"
+                        >
+                            {t("siteAcceptClientConnectionsDescription")}
+                        </p>
+                    </div>
+
+                    <div className="pt-4">
+                        <p className="font-bold mb-3">{t("commands")}</p>
+                        <div className="mt-2 space-y-3">
+                            {commands.map((item, index) => {
+                                const commandText =
+                                    typeof item === "string"
+                                        ? item
+                                        : item.command;
+                                const title =
+                                    typeof item === "string"
+                                        ? undefined
+                                        : item.title;
+
+                                return (
+                                    <div key={index}>
+                                        {title && (
+                                            <p className="text-sm font-medium mb-1.5">
+                                                {title}
+                                            </p>
+                                        )}
+                                        <CopyTextBox
+                                            text={commandText}
+                                            outline={true}
+                                        />
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </SettingsSectionBody>
+        </SettingsSection>
+    );
+}
+
+function getPlatformIcon(platformName: Platform) {
+    switch (platformName) {
+        case "windows":
+            return <FaWindows className="h-4 w-4 mr-2" />;
+        case "unix":
+            return <Terminal className="h-4 w-4 mr-2" />;
+        case "docker":
+            return <FaDocker className="h-4 w-4 mr-2" />;
+        case "kubernetes":
+            return <SiKubernetes className="h-4 w-4 mr-2" />;
+        case "podman":
+            return <FaCubes className="h-4 w-4 mr-2" />;
+        case "nixos":
+            return <SiNixos className="h-4 w-4 mr-2" />;
+        default:
+            return <Terminal className="h-4 w-4 mr-2" />;
+    }
+}
+
+function getPlatformName(platformName: Platform) {
+    switch (platformName) {
+        case "windows":
+            return "Windows";
+        case "unix":
+            return "Unix & macOS";
+        case "docker":
+            return "Docker";
+        case "kubernetes":
+            return "Kubernetes";
+        case "podman":
+            return "Podman";
+        case "nixos":
+            return "NixOS";
+        default:
+            return "Unix / macOS";
+    }
+}
+
+function getArchitectures(platform: Platform) {
+    switch (platform) {
+        case "unix":
+            return ["All"];
+        case "windows":
+            return ["x64"];
+        case "docker":
+            return ["Docker Compose", "Docker Run"];
+        case "kubernetes":
+            return ["Helm Chart"];
+        case "podman":
+            return ["Podman Quadlet", "Podman Run"];
+        case "nixos":
+            return ["All"];
+        default:
+            return ["x64"];
+    }
+}