converted slug into reusable components

Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>

client/src/components/Lobby.jsx

@@ -1,6 +1,7 @@
 import { useSocket } from '@/context/SocketProvider';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react';
+import VideoCallIcon from '@mui/icons-material/VideoCall';
 
 const LobbyScreen = () => {
     const [email, setEmail] = useState("");
@@ -29,7 +30,12 @@ const LobbyScreen = () => {
 
     return (
         <div className='flex flex-col items-center justify-center h-screen bg-gray-100'>
-            <h1 className='text-3xl font-semibold mb-5 mt-5 '>Lobby</h1>
+            <h1 className='text-5xl font-[15px] mb-5 mt-5 text-center font-josefin italic'>Video<VideoCallIcon sx={{ fontSize: 70, color: 'rgb(30,220,30)' }} />Peers</h1>
+            <p className='text-2xl mt-2 mb-4 text-center md:max-w-[400px] max-w-[300px] text-gray-600'>
+                Peer-to-Peer video calls, powered by <b>WebRTC!</b>
+                <br />
+                Bring People Closer Together.
+            </p>
             <div className='bg-white p-6 rounded shadow-md'>
                 <form className='flex flex-col items-center justify-center'
                     onSubmit={handleSubmitForm}
@@ -38,6 +44,7 @@ const LobbyScreen = () => {
                     <input
                         type="email"
                         id='email'
+                        required
                         value={email}
                         autoComplete='off'
                         onChange={(e) => setEmail(e.target.value)}
@@ -45,14 +52,15 @@ const LobbyScreen = () => {
                     <br />
                     <label htmlFor="room">Room Number</label>
                     <input
-                        type="text"
+                        type="number"
                         id='room'
+                        required
                         autoComplete='off'
                         value={room}
                         onChange={(e) => setRoom(e.target.value)}
                     />
                     <br />
-                    <button  className='bg-blue-500 hover:bg-blue-600'>
+                    <button className='bg-blue-500 hover:bg-blue-600'>
                         Join
                     </button>
                 </form>

client/src/components/VideoPlayer.jsx

@@ -0,0 +1,23 @@
+import ReactPlayer from 'react-player';
+
+const VideoPlayer = ({ stream, isAudioMute, name }) => (
+    <div className={`flex flex-col w-full ${name === "My Stream" ? "flex-1" : "items-center justify-center"}`}>
+        <div className={`${name === "My Stream" ? "absolute top-2 right-3 z-10" : "px-2"}`}>
+            <h1 className='text-xl font-poppins font-semibold md:text-2xl mb-1 text-center'>
+                {name === 'My Stream' ? 'My Stream' : 'Remote Stream'}
+            </h1>
+            <div className={`relative rounded-[30px] overflow-hidden
+            ${name === "My Stream" ? "mmd:w-[140px] md:w-[200px] lg:w-[280px]" : "md:w-[600px]"}`}>
+                <ReactPlayer
+                    url={stream}
+                    playing
+                    muted={isAudioMute}
+                    height="auto"
+                    width="auto"
+                />
+            </div>
+        </div>
+    </div>
+);
+
+export default VideoPlayer;