Overnap

방 정보 컴포넌트 추가

1 +import React from 'react';
2 +import { Room } from './types';
3 +
4 +export const RoomInfo: React.FC<Room> = (props: Room) => {
5 + return (
6 + <div className={`flex items-center place-content-between m-2 w-5/6
7 + ${props.currentUsers < props.maxUsers ?
8 + 'bg-white active:bg-green-100' :
9 + 'bg-gray-200 active:bg-gray-200'}
10 + rounded shadow hover:shadow-md`}>
11 + <span className='mt-2 mb-2 ml-3 text-gray-600 text-lg'>{props.name}</span>
12 + <span className='mt-2 mb-2 mr-3 text-gray-500 text-right'>
13 + {props.currentUsers}/{props.maxUsers}
14 + </span>
15 + </div>
16 + );
17 +}
1 +export interface Room {
2 + uuid: string;
3 + name: string;
4 + currentUsers: number;
5 + maxUsers: number;
6 +}