refactor: move reconnect banner to a new component

client/src/components/BuddyMatcher.jsx

@@ -4,6 +4,7 @@ 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';
@@ -258,23 +259,8 @@ 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}  

client/src/components/ReconnectBanner.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+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>
+  );
+};
+
+export default ReconnectBanner;