styled modal

dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useWaitingRoom } from '../../contexts/WaitingRoomProvider';
+import { Button } from '../Button';
+
+export const WaitingParticipantRow = ({ participant }) => {
+  const { grantAccess, denyAccess } = useWaitingRoom();
+
+  const handleAllowClick = () => {
+    grantAccess(participant.id);
+  };
+  const handleDenyClick = () => {
+    denyAccess(participant.id);
+  };
+
+  return (
+    <div className="waiting-room-row">
+      {participant.name}
+      <div className="actions">
+        <Button onClick={handleAllowClick} size="small" variant="success">
+          Allow
+        </Button>
+        <Button onClick={handleDenyClick} size="small" variant="error">
+          Deny
+        </Button>
+      </div>
+
+      <style jsx>{`
+        .waiting-room-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid var(--gray-light);
+          padding-bottom: var(--spacing-xxs);
+          margin-bottom: var(--spacing-xxs);
+        }
+
+        .waiting-room-row:last-child {
+          border-bottom: 0px;
+          padding-bottom: 0px;
+          margin-bottom: 0px;
+        }
+
+        .actions {
+          display: flex;
+          gap: var(--spacing-xxs);
+        }
+      `}</style>
+    </div>
+  );
+};
+
+WaitingParticipantRow.propTypes = {
+  participant: PropTypes.object,
+};
+
+export default WaitingParticipantRow;

dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js

@@ -1,13 +1,42 @@
 import React from 'react';
 import Modal from '@dailyjs/shared/components/Modal';
-
+import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider';
 import PropTypes from 'prop-types';
+import { Button } from '../Button';
+import { WaitingParticipantRow } from '.';
 
-export const WaitingRoomModal = ({ onClose }) => (
-  <Modal title="Waiting room" isOpen onClose={() => onClose()} actions={[]}>
-    Hello
-  </Modal>
-);
+export const WaitingRoomModal = ({ onClose }) => {
+  const { denyAccess, grantAccess, waitingParticipants } = useWaitingRoom();
+
+  const handleAllowAllClick = (close) => {
+    grantAccess('all');
+    close();
+  };
+  const handleDenyAllClick = (close) => {
+    denyAccess('all');
+    close();
+  };
+
+  return (
+    <Modal
+      title="Waiting room"
+      isOpen
+      onClose={() => onClose()}
+      actions={[
+        <Button fullWidth onClick={handleAllowAllClick} variant="success">
+          Allow all
+        </Button>,
+        <Button fullWidth onClick={handleDenyAllClick} variant="error">
+          Deny all
+        </Button>,
+      ]}
+    >
+      {waitingParticipants.map((p) => (
+        <WaitingParticipantRow participant={p} />
+      ))}
+    </Modal>
+  );
+};
 
 WaitingRoomModal.propTypes = {
   onClose: PropTypes.func,

dailyjs/shared/components/WaitingRoom/index.js

@@ -2,3 +2,4 @@ export { WaitingRoom as default } from './WaitingRoom';
 export { WaitingRoom } from './WaitingRoom';
 export { WaitingRoomModal } from './WaitingRoomModal';
 export { WaitingRoomNotification } from './WaitingRoomNotification';
+export { WaitingParticipantRow } from './WaitingParticipantRow';