fix choose/edit sub domain (#295)

* fix choose/edit sub domain

* add carrier instructions to send call to sip-realm

src/components/domain-input/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Icons } from "../icons";
+import "./styles.scss";
+
+type DomainInputProbs = {
+  id?: string;
+  name?: string;
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  root_domain: string;
+  placeholder?: string;
+  is_valid: boolean;
+};
+
+export const DomainInput = ({
+  id,
+  name,
+  value,
+  setValue,
+  root_domain,
+  is_valid,
+  placeholder,
+}: DomainInputProbs) => {
+  return (
+    <>
+      <div className="clipboard clipboard-domain">
+        <div className="input-container">
+          <input
+            id={id}
+            name={name}
+            type="text"
+            value={value}
+            placeholder={placeholder}
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <div className={`input-icon txt--${is_valid ? "teal" : "red"}`}>
+            {is_valid ? <Icons.CheckCircle /> : <Icons.XCircle />}
+          </div>
+        </div>
+        <div className="root-domain">
+          <p>{root_domain}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DomainInput;

src/components/domain-input/styles.scss

@@ -0,0 +1,55 @@
+@use "../../styles/vars";
+@use "../../styles/mixins";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;
+
+.input-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.clipboard-domain {
+  display: flex;
+  align-items: center;
+
+  input[type="text"],
+  input[type="number"] {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    width: 100%;
+    height: vars.$clipheight;
+
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+
+  .internal form & {
+    max-width: calc(#{vars.$widthinput} - #{vars.$clipheight});
+  }
+
+  .input-icon {
+    position: absolute;
+    right: 5%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left: 0;
+  }
+
+  .root-domain {
+    height: vars.$clipheight;
+    border-bottom-right-radius: ui-vars.$px01;
+    border-top-right-radius: ui-vars.$px01;
+    border: 2px solid ui-vars.$grey;
+    border-left: 0;
+    background-color: ui-vars.$pink;
+    padding: ui-vars.$px01;
+    display: flex;
+    align-items: center;
+
+    &[disabled] {
+      @include mixins.disabled();
+    }
+  }
+}