frontend/app/components/CreateRoom.js

import { Button } from "@mantine/core";
import { IconArrowRight, IconChevronRight } from "@tabler/icons-react";
import { useState } from "react";
import { apiUrl } from "../utils";

export default function CreateRoom({ onCreateRoom }) {
  const [fetching, setFetching] = useState(false);
  const [roomUrl, setRoomUrl] = useState();
  const [showManual, setShowManual] = 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
            rightSection={<IconArrowRight stroke={2} className="h-5 w-5" />}
            size="md"
            loading={fetching}
            onClick={() => create()}
          >
            Join
          </Button>
        </div>

        <hr className="my-6" />

        <div
          className="inline-flex items-center gap-1 text-sm text-gray-500 cursor-pointer"
          onClick={() => setShowManual(!showManual)}
        >
          Join an existing room
          <IconChevronRight
            stoke={2}
            className={`w-4 h-4 text-gray-300 transition-transform ${
              showManual && "rotate-90"
            }`}
          />
        </div>

        {showManual && (
          <div className="mt-5 sm:flex sm:items-center">
            <div className="w-full">
              <label htmlFor="room" className="sr-only">
                Daily Room URL
              </label>
              <input
                type="text"
                name="room"
                id="room"
                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                placeholder="https://..."
                onChange={(e) => setRoomUrl(e.target.value)}
              />
            </div>
            <button
              type="submit"
              onClick={() => onCreateRoom(roomUrl)}
              className="mt-3 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 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 sm:ml-3 sm:mt-0 sm:w-auto"
            >
              Join
            </button>
          </div>
        )}
      </div>
    </div>
  );
}