portainer/app/react/docker/containers/CreateView/LabelsTab/Item.tsx

32 lines
1.0 KiB
TypeScript

import { FormError } from '@@/form-components/FormError';
import { InputGroup } from '@@/form-components/InputGroup';
import { ItemProps } from '@@/form-components/InputList';
import { Label } from './types';
export function Item({ item, onChange, error }: ItemProps<Label>) {
return (
<div className="w-full">
<div className="flex w-full gap-4">
<InputGroup className="w-1/2">
<InputGroup.Addon>name</InputGroup.Addon>
<InputGroup.Input
value={item.name}
onChange={(e) => onChange({ ...item, name: e.target.value })}
placeholder="e.g. com.example.foo"
/>
</InputGroup>
<InputGroup className="w-1/2">
<InputGroup.Addon>value</InputGroup.Addon>
<InputGroup.Input
value={item.value}
onChange={(e) => onChange({ ...item, value: e.target.value })}
placeholder="e.g. bar"
/>
</InputGroup>
</div>
{error && <FormError>{Object.values(error)[0]}</FormError>}
</div>
);
}