const UserState = () => {
    return (
        <div className="overflow-auto" style={{ height: '610px' }}>
            <div className="mb-3">
                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
                    <img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
                    <h5 className="col mt-2">Online</h5>
                </div>
                <ul className="mx-5">
                    <li>
                        CHERRY
                    </li>
                    <li>
                        JAEYEON
                    </li>
                    <li>
                        SEOYEON
                    </li>
                    <li>
                        JIWEON
                    </li>
                    <li>
                        BYOUNGYUN
                    </li>
                </ul>
            </div>

            <div className="mb-3">
                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
                    <h5 className="col mt-2">Offline</h5>
                </div>
                <ul className="mx-5">
                    <li>
                        CHERRY
                    </li>
                    <li>
                        JAEYEON
                    </li>
                    <li>
                        SEOYEON
                    </li>
                    <li>
                        JIWEON
                    </li>
                    <li>
                        BYOUNGYUN
                    </li>
                </ul>
            </div>

        </div>

    )
};

export default UserState;