homeio

1import type { DockerRunState } from "@/modules/apps/components/configurator/configurator-mapper";
2
3type DockerRunViewProps = {
4  state: DockerRunState;
5  onChange: (state: DockerRunState) => void;
6};
7
8export function DockerRunView({ state, onChange }: DockerRunViewProps) {
9  const update = (patch: Partial<DockerRunState>) => {
10    onChange({ ...state, ...patch });
11  };
12
13  return (
14    <section className="flex-1 overflow-y-auto px-4 py-3">
15      <p className="mb-3 text-2xs text-muted-foreground">
16        Docker Run is available for custom installs only. Paste a full <code>docker run ...</code>{" "}
17        command here; <code>docker pull ...</code> is not supported in this tab. Web UI
18        metadata is derived from the published ports in the command.
19      </p>
20
21      <div className="space-y-3">
22        <label className="flex flex-col gap-1 text-2xs text-muted-foreground">
23          App Name
24          <input
25            aria-label="App Name"
26            required
27            value={state.name}
28            onChange={(event) => update({ name: event.target.value })}
29            placeholder="My App"
30            className="h-9 rounded-lg border border-glass-border bg-secondary/35 px-2.5 text-xs text-foreground outline-none focus:border-primary/50"
31          />
32        </label>
33
34        <label className="flex flex-col gap-1 text-2xs text-muted-foreground">
35          Icon URL
36          <input
37            aria-label="Icon URL"
38            value={state.iconUrl}
39            onChange={(event) => update({ iconUrl: event.target.value })}
40            placeholder="https://..."
41            className="h-9 rounded-lg border border-glass-border bg-secondary/35 px-2.5 text-xs text-foreground outline-none focus:border-primary/50"
42          />
43        </label>
44
45        <label className="flex flex-col gap-1 text-2xs text-muted-foreground">
46          Repository URL (optional)
47          <input
48            aria-label="Repository URL"
49            value={state.repositoryUrl}
50            onChange={(event) => update({ repositoryUrl: event.target.value })}
51            placeholder="https://github.com/owner/repo"
52            className="h-9 rounded-lg border border-glass-border bg-secondary/35 px-2.5 text-xs text-foreground outline-none focus:border-primary/50"
53          />
54        </label>
55
56        <label className="flex flex-col gap-1 text-2xs text-muted-foreground">
57          Docker Run Command
58          <textarea
59            aria-label="Docker Run"
60            required
61            rows={9}
62            value={state.source}
63            onChange={(event) => update({ source: event.target.value })}
64            placeholder="docker run --name myapp -p 8080:80 nginx:latest"
65            className="resize-y rounded-lg border border-glass-border bg-secondary/20 px-2.5 py-1.5 font-mono text-xs text-foreground outline-none focus:border-primary/50"
66          />
67        </label>
68      </div>
69    </section>
70  );
71}
72