Build Stage UI using DyteGrid

Source Code: https://github.com/dyte-io/react-samples/tree/main/samples/create-your-own-ui

Following code shows you can customise or build the stage UI of a meeting as per your use case.

function InMeeting() {
  return (
    <div className="flex flex-col w-full h-full">
      <header>
        <MeetingHeader />
      </header>

      <main className="flex w-full flex-1">
        <DyteStage className="flex w-full flex-1 p-2">
          <DyteGrid />
          <DyteNotifications />
          <MeetingSideBar />
        </DyteStage>
        <DyteParticipantsAudio />
      </main>

      <footer className="flex w-full overflow-visible">
        <MeetingControlBar />
      </footer>
    </div>
  );
}