added call icons

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

client/package.json

@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
     "next": "14.0.2",
     "react": "^18",
     "react-dom": "^18",

client/src/components/CallHandleButtons.jsx

@@ -0,0 +1,28 @@
+// components/CallButtons.jsx
+import MicOffIcon from '@mui/icons-material/MicOff';
+import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice';
+import VideocamIcon from '@mui/icons-material/Videocam';
+import VideocamOffIcon from '@mui/icons-material/VideocamOff';
+import CallEndIcon from '@mui/icons-material/CallEnd';
+
+const CallHandleButtons = ({ isAudioMute, isVideoOnHold, onToggleAudio, onToggleVideo, onEndCall }) => (
+    <div className='flex space-x-4 mt-4 h-[75px] items-center justify-center w-96 rounded-md'>
+        <div className='flex w-[100%] justify-evenly'>
+            <button className="callButtons text-gray-700 border-gray-700 hover:bg-gray-700
+        focust:ring-4 focus:ring-gray-300" onClick={onToggleAudio}>
+                {isAudioMute ? <MicOffIcon fontSize="large" /> : <KeyboardVoiceIcon fontSize="large" />}
+            </button>
+            <button className="callButtons text-blue-700 border-blue-700 hover:bg-blue-700 
+        focus:ring-4 focus:ring-blue-300"
+                onClick={onToggleVideo}
+            >
+                {isVideoOnHold ? <VideocamIcon fontSize="large" /> : <VideocamOffIcon fontSize="large" />}
+            </button>
+            <button className="callButtons text-red-700 border-red-700 hover:bg-red-700
+        focus:ring-4 focus:ring-red-700" onClick={onEndCall}>
+                <CallEndIcon fontSize="large" />
+            </button>
+        </div>
+    </div>
+);
+export default CallHandleButtons;

client/tailwind.config.js

@@ -12,6 +12,35 @@ module.exports = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      fontFamily: {
+        'poppins': ['Poppins', 'sans-serif'],
+        'josefin': ['Josefin Sans', 'sans-serif']
+      },
+      keyframes: {
+        pulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.6' },
+        }
+      },
+      animation: {
+        'pulse': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1)  infinite',
+      },
+      screens: {
+        mxxl: { 'max': '1535px' },
+        // => @media (max-width: 1535px) { ... }
+        mxl: { 'max': '1279px' },
+        // => @media (max-width: 1279px) { ... }
+        mlg: { 'max': '1023px' },
+        // => @media (max-width: 1023px) { ... }
+        mmd: { 'max': '767px' },
+        // => @media (max-width: 767px) { ... }
+        msm: { 'max': '639px' },
+        // => @media (max-width: 639px) { ... }
+        mss: { 'max': '550px' },
+        // => @media (max-width: 550px) { ... }
+        mxs: { 'max': "480px" }
+        // => @media (max-width: 480px) { ... }
+      },
     },
   },
   plugins: [],