ui for video calling

App.css

.container {
  margin: 10px;
  padding: 10px;
  text-align: center;
}
.container input {
  display: block;
  text-align: center;
  margin: 0.5em auto;
  padding: 0.5em;
}

.stream {
  width: 480px;
  height: 320px;
}

App.js

function App() {
  const [joined, setJoined] = useState(false);
  
  const channelRef = useRef("");
  const remoteRef = useRef("");
  const leaveRef = useRef("");
  
  return (
    <>
      <div className="container">
        <input
          type="text"
          ref={channelRef}
          id="channel"
          placeholder="Enter Channel name"
        />
        <input
          type="submit"
          value="Join"
          onClick={handleSubmit}
          disabled={joined ? true : false}
        />
        <input
          type="button"
          ref={leaveRef}
          value="Leave"
          onClick={handleLeave}
          disabled={joined ? false : true}
        />
      </div>
      {joined ? (
        <>
          <div id="local-stream" className="stream local-stream"></div>
          <div
            id="remote-stream"
            ref={remoteRef}
            className="stream remote-stream"
          ></div>
        </>
      ) : null}
    </>
  );
}