| 1 | import { |
| 2 | Dialog, |
| 3 | DialogContent, |
| 4 | DialogDescription, |
| 5 | DialogHeader, |
| 6 | DialogTitle, |
| 7 | DialogTrigger, |
| 8 | } from "@/components/ui/dialog"; |
| 9 | import { Terminal } from "lucide-react"; |
| 10 | import { Button } from "@/components/ui/button"; |
| 11 | import { TunnelCommandForm } from "@/components/TunnelCommandForm"; |
| 12 | |
| 13 | export function TunnelCommandModal() { |
| 14 | return ( |
| 15 | <Dialog> |
| 16 | <DialogTrigger asChild> |
| 17 | <Button |
| 18 | type="button" |
| 19 | className="h-10 cursor-pointer rounded-md bg-primary/10 px-4 text-sm font-semibold text-primary shadow-none transition-colors hover:bg-primary/16" |
| 20 | > |
| 21 | Add Your Server |
| 22 | </Button> |
| 23 | </DialogTrigger> |
| 24 | <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-y-auto rounded-md border border-border bg-card p-0 text-card-foreground shadow-[0_18px_48px_rgba(15,23,42,0.14)] dark:border-white/10 dark:bg-card dark:text-zinc-100 dark:shadow-[0_22px_56px_rgba(0,0,0,0.42)] [&>button]:right-5 [&>button]:top-5 [&>button]:rounded-md [&>button]:text-text-muted [&>button]:ring-offset-card [&>button]:hover:bg-foreground/5 [&>button]:hover:text-foreground [&>button]:focus:ring-ring/30 [&>button]:data-[state=open]:bg-transparent [&>button]:data-[state=open]:text-text-muted dark:[&>button]:text-zinc-500 dark:[&>button]:ring-offset-card dark:[&>button]:hover:bg-white/5 dark:[&>button]:hover:text-zinc-300 dark:[&>button]:focus:ring-white/20 dark:[&>button]:data-[state=open]:text-zinc-500"> |
| 25 | <DialogHeader className="px-6 pt-6 pb-4 text-left"> |
| 26 | <DialogTitle className="flex items-center gap-2 text-[1.05rem] font-semibold tracking-normal text-foreground dark:text-zinc-100"> |
| 27 | <Terminal className="h-4 w-4" /> |
| 28 | Tunnel Setup Command |
| 29 | </DialogTitle> |
| 30 | <DialogDescription className="max-w-[34ch] pt-1 text-sm leading-6 text-muted-foreground dark:text-zinc-400"> |
| 31 | Configure your tunnel settings and copy the command to start |
| 32 | exposing your local server. |
| 33 | </DialogDescription> |
| 34 | </DialogHeader> |
| 35 | |
| 36 | <div className="px-6 pb-6"> |
| 37 | <TunnelCommandForm /> |
| 38 | </div> |
| 39 | </DialogContent> |
| 40 | </Dialog> |
| 41 | ); |
| 42 | } |