added game link to env file

.env

@@ -118,4 +118,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'

.env.development

@@ -86,4 +86,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'

.env.production

@@ -92,4 +92,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
+REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'

src/components/Iframe/Iframe.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function Iframe({src, title}) {
+  return (
+    <iframe 
+        src={src}
+        title={title}
+        className='w-full h-full' 
+    >
+    </iframe>
+  )
+}

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -273,8 +273,7 @@ function ActiveJobsMedia(props) {
   return (
     <MediaLayout
         backpath={props.details.pathname}
-        title={props.details?.title && props.details.title}
+        title={props.details?.title ? props.details.title : ''}
-        state={props.details.accountDetails}
     >
         {/* job title */}
             {/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">

src/components/Partials/MediaHeader.jsx

@@ -19,7 +19,7 @@ import TimeDifference from "../Helpers/TimeDifference";
 
 const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
 
-export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, state, title }) {
+export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, title }) {
 
   const darkMode = useContext(DarkModeContext);
 
@@ -172,7 +172,6 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
             onClick={() => {
                 if (backpath == "/manage-family") {
                 navigate(backpath,
-                    { state: state ? { ...state } : {} },
                     { replace: true }
                 );
                 } else {

src/components/Partials/MediaLayout.jsx

@@ -10,7 +10,7 @@ import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
 import MediaHeader from "./MediaHeader";
 
-export default function MediaLayout({backpath, title, state, children }) {
+export default function MediaLayout({backpath, title, children }) {
     const { drawer } = useSelector((state) => state.drawer);
     const { userJobList } = useSelector((state) => state.userJobList);
     const dispatch = useDispatch();
@@ -69,7 +69,7 @@ export default function MediaLayout({backpath, title, state, children }) {
                     <div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px]  h-full`}>
                         {/* header */}
                         <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
-                            <MediaHeader backpath={backpath} title={title} state={state ? state : ''} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
+                            <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                         </div>
                         {/* container */}
                         <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">

src/components/familyResources/FamGames.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { lazy, Suspense, useRef, useState } from 'react'
 import Layout from '../Partials/Layout'
 import MediaLayout from '../Partials/MediaLayout'
 import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
@@ -9,6 +9,8 @@ import { useNavigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { useReactToPrint } from 'react-to-print'
 
+const Iframe = lazy(() => import("../Iframe/Iframe"));
+
 export default function FamGames() {
 
   const ApiCall = new usersService();
@@ -229,8 +231,7 @@ export default function FamGames() {
   return (
     <MediaLayout
       backpath={'/'}
-      title={''}
+      title={'Games'}
-      state={''}
     >
         {/* <div className='mb-4'>
           <CustomBreadcrumb 
@@ -246,8 +247,13 @@ export default function FamGames() {
         <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
             <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             
-            <div className="mb-4 w-full h-aut h-[600px] bg-white shadow-md rounded-2xl">
+            <div className="mb-4 w-full h-screen max-h-[600px]">
-                {/* <VideoElement videoId={props?.details?.media_uid} /> */}
+              <Suspense fallback={<Fallback />}>
+                <Iframe 
+                  src={process.env.REACT_APP_FAM_GAME_LINK}
+                  title='Games'
+                />
+              </Suspense>
             </div>
 
             <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
@@ -509,3 +515,13 @@ export default function FamGames() {
     </MediaLayout>
   )
 }
+
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen max-h-[600px]' />
+    </div>
+  )
+}

src/views/FamGamesPage.jsx

@@ -1,9 +1,24 @@
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
-import FamGames from '../components/familyResources/FamGames'
+import LoadingSpinner from '../components/Spinners/LoadingSpinner';
+// import FamGames from '../components/familyResources/FamGames'
+
+const FamGames = lazy(() => import("../components/familyResources/FamGames"));
+
 export default function FamGamesPage() {
   return (
     <>
-        <FamGames />
+      <Suspense fallback={<Fallback />}>
+          <FamGames />
+      </Suspense>
     </>
   )
 }
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen' />
+    </div>
+  )
+}