import { DailyProvider } from '@daily-co/daily-react';

function App({ roomUrl }) {
  return (
    <DailyProvider url={roomUrl}>
      {/* … */}
    </DailyProvider>
  )
}

import { useParticipant, useParticipantIds } from '@daily-co/daily-react';

function ParticipantRow({ id }) {
  const participant = useParticipant(id);

  return (
    <li style={{ display: 'flex', gap: 8 }}>
      <span>{participant?.user_name ?? 'Guest'}</span>
      <span>📷{participant?.tracks?.video?.state === 'playable' ? '✅' : '❌'}</span>
      <span>🎙️{participant?.tracks?.audio?.state === 'playable' ? '✅' : '❌'}</span>
    </li>
  )
}

function Participants() {
  const participantIds = useParticipantIds({
    filter: 'remote',
    sort: 'user_name'
  });

  return (
    <ul>
      {participantIds.map((id) => <ParticipantRow key={id} id={id} />)}
    </ul>
  )
}