frontend/app/components/Joining.js

import { useDaily } from "@daily-co/daily-react";
import { useEffect } from "react";

export default function Join({ roomUrl, onJoin }) {
  const daily = useDaily();

  useEffect(() => {
    daily.join({ url: roomUrl, startAudioOff: true, audioSource: false });

    onJoin();
  });

  return (
    <main className="min-h-screen flex items-center justify-center bg-zinc-200">
      <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">
            Joining...
          </h3>
        </div>
      </div>
    </main>
  );
}