From 4a0cfa03a5852f5e4efabc4c027e56d87ec182e4 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 28 Mar 2024 08:22:00 +0100
Subject: [PATCH] Family pending task start popout style changed

---
 src/components/ImageCon/ImageElement.jsx      |  9 +++
 .../jobPopout/FamilyOfferJobPopout.jsx        | 60 ++++++++++---------
 2 files changed, 40 insertions(+), 29 deletions(-)
 create mode 100644 src/components/ImageCon/ImageElement.jsx

diff --git a/src/components/ImageCon/ImageElement.jsx b/src/components/ImageCon/ImageElement.jsx
new file mode 100644
index 0000000..fdc6285
--- /dev/null
+++ b/src/components/ImageCon/ImageElement.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function ImageElement({className, src, alt}) {
+  return (
+    <div className='w-full h-full flex justify-center items-center'>
+        <img src={src} alt={alt} className={`object-cover w-auto h-full ${className && className}`} />
+    </div>
+  )
+}
diff --git a/src/components/jobPopout/FamilyOfferJobPopout.jsx b/src/components/jobPopout/FamilyOfferJobPopout.jsx
index 8651be7..ff3b60f 100644
--- a/src/components/jobPopout/FamilyOfferJobPopout.jsx
+++ b/src/components/jobPopout/FamilyOfferJobPopout.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Suspense, lazy, useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import { useNavigate } from "react-router-dom";
@@ -12,6 +12,9 @@ import { useDispatch } from "react-redux";
 
 import { SocketValues } from "../Contexts/SocketIOContext";
 
+const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
+const ImageElement = lazy(() => import("../ImageCon/ImageElement"));
+
 function FamilyOfferJobPopout({ details, onClose, situation }) {
 
   const {parentAssignJobToKid} = SocketValues()
@@ -118,8 +121,6 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
       });
   };
 
-  console.log(details)
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -153,12 +154,9 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white rounded-lg">
-          <div className="p-4 w-full md:w-3/4 md:border-r-2">
+        <div className="md:flex bg-white rounded-lg h-[450px] overflow-y-auto">
+          <div className="p-4 w-full md:w-3/5 md:border-r-2">
             <div className="flex gap-2">
-                <div className="image-wrapper w-32">
-                    <img className="w-full h-auto" src={details?.image} alt='banner' />
-                </div>
                 <div className="details-wrapper">
                     <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
                     {details.title}
@@ -208,7 +206,22 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-1/4 h-full">
+          <div className="p-4 w-full md:w-2/5 h-full flex flex-col justify-between">
+            { details.job_type == 'TASK' ?
+              <div className="image-wrapper w-full h-40 flex justify-center items-center">
+                <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
+                  <ImageElement src={details?.image} alt='banner' className='w-auto h-full' />
+                </Suspense>
+              </div>
+              :
+              <div className="w-full flex justify-center">
+                <div className="w-full max-w-xs">
+                  <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
+                    <VideoElement videoId={details.media_uid} />
+                  </Suspense>
+                </div>
+              </div>
+            }
             <div className="my-3 md:flex md:justify-center">
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
@@ -238,30 +251,19 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
                 </button>
               )}
             </div> */}
-
-            {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-            {requestStatus.message != "" &&
-              (!requestStatus.status ? (
-                <div
-                  className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                >
-                  {requestStatus.message}
-                </div>
-              ) : (
-                requestStatus.status && (
-                  <div
-                    className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                  >
-                    {requestStatus.message}
-                  </div>
-                )
-              ))}
-            {/* End of error or success display */}
           </div>
         </div>
 
         {/* close button */}
-        <div className="modal-footer-wrapper flex justify-end">
+        <div className="modal-footer-wrapper flex justify-between">
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          <div
+            className={`relative text-md font-light leading-[19.5px] text-[13px] ${requestStatus.status ? 'text-green-700' : 'text-[#912741]'}`}
+          >
+            {requestStatus.message}
+          </div>
+          {/* End of error or success display */}
+
           <button
             onClick={onClose}
             disabled={requestStatus.loading}