feat: move reconnect banner to a new component

client/src/components/BuddyMatcher.jsx

@@ -1,12 +1,13 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { ThreeDots } from 'react-loading-icons';
-import { PiPlugsLight } from 'react-icons/pi';
+//import { PiPlugsLight } from 'react-icons/pi';
 import { connectWithId, socket } from 'src/lib/socketConnection';
 
 import Anonymous from 'components/Anonymous';
+import ReconnectBanner from 'components/ReconnectBanner';
 import { useAuth } from 'src/context/AuthContext';
 import { useChat } from 'src/context/ChatContext';
-import { useNavigate, Link } from 'react-router-dom';
+//import { useNavigate, Link } from 'react-router-dom';
 import { useNotification } from 'src/lib/notification';
 import { useApp } from 'src/context/AppContext';
 import { createBrowserNotification } from 'src/lib/browserNotification';
@@ -23,6 +24,7 @@ import {
 	NEW_EVENT_STOP_SEARCH,
 	NEW_EVENT_STOP_SEARCH_SUCCESS,
 } from '../../../constants.json';
+import { useNavigate } from 'react-router-dom';
 
 const stoppingSearchLoadingText = <p>Stopping the search</p>;
 const BuddyMatcher = () => {
@@ -258,28 +260,12 @@ const BuddyMatcher = () => {
 			)}
 		</div>
 	) : disconnected ? (
-		<div className="flex flex-col w-full justify-center items-center h-full bg-primary">
-			<PiPlugsLight className="text-secondary text-8xl" />
-			<p className="text-lg text-center text-white">Sorry, it seems you&apos;re not connected</p>
-			<div className="flex flex-col sm:flex-row gap-1 sm:gap-4 text-[1.5em] mt-4 font-medium items-center">
-				<button
-					onClick={handleReconnect}
-					className={
-						'hover:no-underline hover:text-black text-black w-[8em] h-[2.3em] rounded-[30px] bg-[#FF9F1C] flex flex-col items-center justify-center'
-					}
-				>
-					Try again
-				</button>
-				<Link to="/" className="underline text-white hover:text-white text-lg">
-					Return Home
-				</Link>
-			</div>
-		</div>
+		<ReconnectBanner handleReconnect={handleReconnect}/>
+		//Changes made here with moviing reconnector to another component.
 	) : (
 		<Anonymous 
 			onChatClosed={startNewSearch}  
 		/>
 	);
 };
-
 export default BuddyMatcher;

client/src/components/ReconnectBanner.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types'; // Import the PropTypes package
+import { PiPlugsLight } from 'react-icons/pi';
+import { Link } from 'react-router-dom';
+const ReconnectBanner = ({ handleReconnect }) => {
+	return (
+		<div className="flex flex-col w-full justify-center items-center h-full bg-primary">
+			<PiPlugsLight className="text-secondary text-8xl" />
+			<p className="text-lg text-center text-white">Sorry, it seems you&apos;re not connected</p>
+			<div className="flex flex-col sm:flex-row gap-1 sm:gap-4 text-[1.5em] mt-4 font-medium items-center">
+				<button
+					onClick={handleReconnect}
+					className={
+						'hover:no-underline hover:text-black text-black w-[8em] h-[2.3em] rounded-[30px] bg-[#FF9F1C] flex flex-col items-center justify-center'
+					}
+				>
+					Try again
+				</button>
+        <Link
+          to="/"
+          className="underline text-white hover:text-white text-lg"
+        >
+					Return Home
+				</Link>
+			</div>
+		</div>
+	);
+};
+// Define the expected prop types
+ReconnectBanner.propTypes = {
+	handleReconnect: PropTypes.func.isRequired, 
+};
+export default ReconnectBanner;