feat(add-system): add link to binary install docs in copy button

beszel/site/src/components/add-system.tsx

@@ -112,9 +112,12 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 	}
 
 	return (
-		<DialogContent className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg" onCloseAutoFocus={() => {
+		<DialogContent
+			className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg"
+			onCloseAutoFocus={() => {
 				setHostValue(system?.host ?? "")
-		}}>
+			}}
+		>
 			<Tabs defaultValue="docker">
 				<DialogHeader>
 					<DialogTitle className="mb-2">
@@ -207,35 +210,21 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 					<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col mt-5">
 						{/* Docker */}
 						<TabsContent value="docker" className="contents">
-							<div className="flex gap-0 rounded-lg">
+							<CopyButton
-								<Button
+								text={t`Copy` + " docker compose"}
-									type="button"
-									variant="outline"
 								onClick={() => copyDockerCompose(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-									className="rounded-e-none dark:border-e-0 grow"
+								dropdownText={t`Copy` + " docker run"}
-								>
+								dropdownOnClick={() => copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-									<Trans>Copy</Trans> docker compose
+							/>
-								</Button>
-								<div className="w-px h-full bg-muted"></div>
-								<DropdownMenu>
-									<DropdownMenuTrigger asChild>
-										<Button variant="outline" className={"px-2 rounded-s-none border-s-0"}>
-											<ChevronDownIcon />
-										</Button>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent align="end">
-										<DropdownMenuItem onClick={() => copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey)}>
-											<Trans>Copy</Trans> docker run
-										</DropdownMenuItem>
-									</DropdownMenuContent>
-								</DropdownMenu>
-							</div>
 						</TabsContent>
 						{/* Binary */}
 						<TabsContent value="binary" className="contents">
-							<Button type="button" variant="outline" onClick={() => copyInstallCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}>
+							<CopyButton
-								<Trans>Copy Linux command</Trans>
+								text={t`Copy Linux command`}
-							</Button>
+								onClick={() => copyInstallCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}
+								dropdownText={t`Manual setup instructions`}
+								dropdownUrl="https://beszel.dev/guide/agent-installation#binary"
+							/>
 						</TabsContent>
 						{/* Save */}
 						<Button>{system ? <Trans>Save system</Trans> : <Trans>Add system</Trans>}</Button>
@@ -245,3 +234,40 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 		</DialogContent>
 	)
 })
+
+interface CopyButtonProps {
+	text: string
+	onClick: () => void
+	dropdownText: string
+	dropdownOnClick?: () => void
+	dropdownUrl?: string
+}
+
+const CopyButton = memo((props: CopyButtonProps) => {
+	return (
+		<div className="flex gap-0 rounded-lg">
+			<Button type="button" variant="outline" onClick={props.onClick} className="rounded-e-none dark:border-e-0 grow">
+				{props.text}
+			</Button>
+			<div className="w-px h-full bg-muted"></div>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="outline" className={"px-2 rounded-s-none border-s-0"}>
+						<ChevronDownIcon />
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end">
+					{props.dropdownUrl ? (
+						<DropdownMenuItem asChild>
+							<a href={props.dropdownUrl} target="_blank" rel="noopener noreferrer">
+								{props.dropdownText}
+							</a>
+						</DropdownMenuItem>
+					) : (
+						<DropdownMenuItem onClick={props.dropdownOnClick}>{props.dropdownText}</DropdownMenuItem>
+					)}
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
+	)
+})