frontend/app/components/CreateRoom.js

import { ArrowRightIcon } from "@heroicons/react/20/solid";
import { useState } from "react";
import { apiUrl } from "../utils";

export default function CreateRoom({ onCreateRoom }) {
  const [fetching, setFetching] = useState(false);

  async function create() {
    setFetching(true);

    const resp = await fetch(`${apiUrl}/create`, {
      method: "POST",
      mode: "cors",
      cache: "no-cache",
      credentials: "same-origin",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const data = await resp.json();

    if (!data.room_url) {
      setFetching(false);
      console.log("error creating room");
    }

    onCreateRoom(data.room_url);
  }

  return (
    <div className="bg-white shadow sm:rounded-lg max-w-xl mx-auto">
      <div className="px-4 py-5 sm:p-6">
        <h3 className="text-base font-semibold leading-6 text-gray-900">
          What is this
        </h3>
        <div className="mt-2 text-sm text-gray-500">
          <p>Explanation goes here</p>
        </div>
        <div className="mt-5">
          <button
            type="button"
            disabled={fetching}
            className="inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            onClick={() => create()}
          >
            Start
            <ArrowRightIcon className="-h-5 w-5" aria-hidden="true" />
          </button>
        </div>
      </div>
    </div>
  );
}