feat: separate code snippets and code blocks for copyable snippets

app/routes/machines/dialogs/new.tsx

@@ -3,7 +3,7 @@ import { Computer, FileKey2 } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 
-import Code from "~/components/code";
+import CodeBlock from "~/components/code-block";
 import Dialog, { DialogPanel } from "~/components/dialog";
 import Input from "~/components/input";
 import { Menu, MenuContent, MenuItem, MenuTrigger } from "~/components/menu";
@@ -36,10 +36,8 @@ export default function NewMachine(data: NewMachineProps) {
       <Dialog isOpen={pushDialog} onOpenChange={setPushDialog}>
         <DialogPanel isDisabled={!form.canSubmit}>
           <Title>Register Machine Key</Title>
-          <Text className="mb-4">
-            The machine key is given when you run{" "}
-            <Code isCopyable>tailscale up --login-server={data.server}</Code> on your device.
-          </Text>
+          <Text>The machine key is given when you run the following command on your device:</Text>
+          <CodeBlock className="mb-4">{`tailscale up --login-server=${data.server}`}</CodeBlock>
           <input name="action_id" type="hidden" value="register" />
           <Input
             {...form.field("register_key")}