homeio

1type ComposeEditorViewProps = {
2  composeDraft: string;
3  onChange: (next: string) => void;
4  parseError: string | null;
5};
6
7export function ComposeEditorView({ composeDraft, onChange, parseError }: ComposeEditorViewProps) {
8  return (
9    <section className="flex-1 overflow-hidden px-4 py-3">
10      <div className="mb-2 rounded-lg border border-glass-border bg-secondary/25 px-2.5 py-1.5 text-2xs text-muted-foreground">
11        Docker Compose is the source of truth. Classic fields are derived from this draft.
12      </div>
13
14      {parseError ? (
15        <div className="mb-2 rounded-lg border border-status-red/40 bg-status-red/10 px-2.5 py-1.5 text-2xs text-status-red">
16          Unable to parse compose: {parseError}
17        </div>
18      ) : null}
19
20      <textarea
21        aria-label="Docker Compose"
22        value={composeDraft}
23        onChange={(event) => onChange(event.target.value)}
24        className="h-[calc(100%-2rem)] w-full resize-none rounded-lg border border-glass-border bg-secondary/20 p-2.5 font-mono text-xs leading-4 text-foreground outline-none focus:border-primary/50"
25      />
26    </section>
27  );
28}
29