WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'media-page-update' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2024-04-11 14:51:31 +00:00
committed by Gogs
parent 688592e1a3 7ca8c23479
commit 8c475a56bb
4 changed files with 389 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/ActiveJobs.jsx
+80 -87
View File
@@ -12,6 +12,7 @@ import IndexJobActions from "./JobActions/IndexJobActions";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter"; import { PriceFormatter } from "../Helpers/PriceFormatter";
import { SocketValues } from "../Contexts/SocketIOContext"; import { SocketValues } from "../Contexts/SocketIOContext";
import TabButton from "../customTabs/TabButton";
function ActiveJobs(props) { function ActiveJobs(props) {
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -29,7 +30,9 @@ function ActiveJobs(props) {
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
const [tab, setTab] = useState("message"); // const [tab, setTab] = useState("message");
const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
const [selectedTab, setSelectedTab] = useState(tabs[0]);
const [requestStatus, setRequestStatus] = useState({ const [requestStatus, setRequestStatus] = useState({
loading: false, loading: false,
@@ -93,9 +96,9 @@ function ActiveJobs(props) {
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
const handleClearAll = ({ target: { name } }) => { const handleClearAll = ({ target: { name } }) => {
if (tab == "message") { if (selectedTab == "Send Message") {
setMessageToSend(""); setMessageToSend("");
} else if (tab == "files") { } else if (selectedTab == "Send Files") {
setFilesToSend([]); setFilesToSend([]);
} else { } else {
return; return;
@@ -394,37 +397,24 @@ function ActiveJobs(props) {
{/* TEXTAREA SECTION */} {/* TEXTAREA SECTION */}
<div className="mt-5"> <div className="mt-5">
<div className=""> <div className="w-full">
<div {/* switch button */}
className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3" <div className="grid grid-cols-2">
// className='ml-7 flex justify-start items-center gap-3' {tabs.map((item) => (
> <TabButton
<button key={item}
name="message" item={item}
onClick={(e) => setTab(e.target.name)} selectedTab={selectedTab}
className={`px-4 py-1 rounded-t-2xl ${ setSelectedTab={setSelectedTab}
tab == "message" />
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" ))}
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Message
</button>
<button
name="files"
onClick={(e) => setTab(e.target.name)}
className={`px-4 py-1 rounded-t-2xl ${
tab == "files"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Files
</button>
</div> </div>
{tab == "message" ? ( {/* switch button */}
<div className="w-full bg-red-50 overflow-x-auto">
{selectedTab == "Send Message" ? (
<div className="p-2 w-full">
<textarea <textarea
className="p-4 w-full h-[200px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none" className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
// rows="10" // rows="10"
style={{ resize: "none" }} style={{ resize: "none" }}
name="message" name="message"
@@ -432,12 +422,14 @@ function ActiveJobs(props) {
value={messageToSend} value={messageToSend}
autoFocus autoFocus
/> />
</div>
) : ( ) : (
<div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300"> <div className="p-2 w-full">
<div className="files"> <div className="p-4 mb-2 h-[150px] text-base text-slate-600">
<div className="files flex">
<label <label
htmlFor="file" htmlFor="file"
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer" className="custom-btn btn-gradient text-base text-white"
> >
Select Files to Upload Select Files to Upload
</label> </label>
@@ -449,7 +441,7 @@ function ActiveJobs(props) {
onChange={handleFileChange} onChange={handleFileChange}
/> />
</div> </div>
<div className="selected_file my-2"> <div className="selected_file my-2 overflow-y-auto">
{filesToSend.length > 0 && {filesToSend.length > 0 &&
filesToSend.map((item, index) => ( filesToSend.map((item, index) => (
<p key={index} className="flex items-center space-x-2"> <p key={index} className="flex items-center space-x-2">
@@ -465,7 +457,59 @@ function ActiveJobs(props) {
))} ))}
</div> </div>
</div> </div>
</div>
)} )}
{/* Buttons Sections */}
<div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
<button
type="button"
onClick={handleClearAll}
className="custom-btn border-gradient"
>
<span className="text-gradient">Clear</span>
</button>
{selectedTab == "Send Files" ? (
<button
onClick={sendFile}
type="button"
className="custom-btn btn-gradient text-white"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20"
height="20"
fill="white"
>
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
</svg>
<span className="text-white">Upload Files</span>
</>
)}
</button>
) : (
<button
onClick={sendTaskMessage}
type="button"
className="custom-btn btn-gradient text-white"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Send</span>
)}
</button>
)}
</div>
</div>
{/* end of Buttons Sections */}
</div>
</div> </div>
{/* ERROR DISPLAY AND SUBMIT BUTTON */} {/* ERROR DISPLAY AND SUBMIT BUTTON */}
@@ -489,57 +533,6 @@ function ActiveJobs(props) {
))} ))}
</div> </div>
{/* End of error or success display */} {/* End of error or success display */}
{/* Buttons Sections */}
<div className="py-2 sm:flex sm:justify-end sm:items-center">
<div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
<button
type="button"
onClick={handleClearAll}
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
>
<span className="text-gradient">Clear</span>
</button>
{tab == "files" ? (
<button
onClick={sendFile}
type="button"
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="white"
>
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
</svg>
<span className="text-white">Upload Files</span>
</>
)}
</button>
) : (
<button
onClick={sendTaskMessage}
type="button"
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Send</span>
)}
</button>
)}
</div>
</div>
{/* end of Buttons Sections */}
</div> </div>
{/* END OF TEXTAREA */} {/* END OF TEXTAREA */}
</div> </div>
src/components/MyActiveJobs/ActiveJobsMedia.jsx
+65 -88
View File
@@ -15,6 +15,7 @@ const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter"; import { PriceFormatter } from "../Helpers/PriceFormatter";
import { SocketValues } from "../Contexts/SocketIOContext"; import { SocketValues } from "../Contexts/SocketIOContext";
import TabButton from "../customTabs/TabButton";
function ActiveJobsMedia(props) { function ActiveJobsMedia(props) {
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -32,7 +33,9 @@ function ActiveJobsMedia(props) {
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
const [tab, setTab] = useState("message"); // const [tab, setTab] = useState("message");
const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
const [selectedTab, setSelectedTab] = useState(tabs[0]);
const [requestStatus, setRequestStatus] = useState({ const [requestStatus, setRequestStatus] = useState({
loading: false, loading: false,
@@ -96,9 +99,9 @@ function ActiveJobsMedia(props) {
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
const handleClearAll = ({ target: { name } }) => { const handleClearAll = ({ target: { name } }) => {
if (tab == "message") { if (selectedTab == "Send Message") {
setMessageToSend(""); setMessageToSend("");
} else if (tab == "files") { } else if (selectedTab == "Send Files") {
setFilesToSend([]); setFilesToSend([]);
} else { } else {
return; return;
@@ -275,56 +278,17 @@ function ActiveJobsMedia(props) {
backpath={props.details.pathname} backpath={props.details.pathname}
title={props.details?.title ? props.details.title : ''} title={props.details?.title ? props.details.title : ''}
> >
{/* 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">
<div className="w-full">
<div className="w-full flex justify-start space-x-3 items-start">
<button
type="button"
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
onClick={() => {
if (props.details.pathname == "/manage-family") {
navigate(
props.details.pathname,
{ state: { ...props.details.accountDetails } },
{ replace: true }
);
} else {
navigate(props.details.pathname, { replace: true });
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 24 24"
fill="skyblue"
>
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
</svg>
</button>
<h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
{props.details?.title && props.details.title}
</h1>
</div>
</div>
</div> */}
{/* end of job title */}
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0"> <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="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-auto"> <div className="mb-4 w-full h-auto">
<VideoElement videoId={props?.details?.media_uid} /> <VideoElement videoId={props?.details?.media_uid} />
</div> </div>
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8"> <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md xl:flex xl:justify-between gap-4">
<div className="w-full flex flex-col justify-between"> <div className="w-full flex flex-col justify-between">
<div className="w-full"> {/* <p className="w-full text-base text-right text-sky-blue">
<p className="w-full text-base text-right text-sky-blue">
{props?.details && props.details.job_to} {props?.details && props.details.job_to}
</p> </p> */}
<div className="text-base tracking-wide"> <div className="text-base tracking-wide">
<p className="font-semibold text-black dark:text-white tracking-wider"> <p className="font-semibold text-black dark:text-white tracking-wider">
Description:{" "} Description:{" "}
@@ -333,7 +297,7 @@ function ActiveJobsMedia(props) {
{props?.details && props.details.description} {props?.details && props.details.description}
</p> </p>
</div> </div>
<div className="mt-6 w-full lg:flex gap-8"> <div className="mt-6 w-full">
<div className="w-full text-base tracking-wide"> <div className="w-full text-base tracking-wide">
<p className="font-semibold text-black dark:text-white tracking-wider"> <p className="font-semibold text-black dark:text-white tracking-wider">
Delivery Detail:{" "} Delivery Detail:{" "}
@@ -342,15 +306,18 @@ function ActiveJobsMedia(props) {
{props?.details && props.details.job_description} {props?.details && props.details.job_description}
</p> </p>
</div> </div>
<div className="my-2 lg:my-0"> {/* <div className="my-2 xl:my-0">
<IndexJobActions details={props.details} /> <IndexJobActions details={props.details} />
</div> </div> */}
</div>
</div> </div>
</div> </div>
<div className="flex justify-between items-center gap-1 xl:min-w-[350px]">
<div className="h-[150px] xl:h-full w-[150px] xl:min-w-[150px]">
<IndexJobActions details={props.details} />
</div>
{/* job details */} {/* job details */}
<div className="w-full md:w-[200px] flex flex-col justify-center gap-4"> <div className="min-w-[170px] flex flex-col justify-center gap-2">
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */} {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
{passDue ? ( {passDue ? (
<div className="my-1"> <div className="my-1">
@@ -398,24 +365,17 @@ function ActiveJobsMedia(props) {
day(s) day(s)
</span> </span>
</div> </div>
{/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
<span className="font-semibold text-black dark:text-white">
No:{" "}
</span>
<span className="">
{props.details?.contract && props.details.contract}
</span>
</div> */}
</div> </div>
{/* end of job details */} {/* end of job details */}
</div> </div>
</div> </div>
</div>
<div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4"> <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
{/* TEXTAREA SECTION */} {/* TEXTAREA SECTION */}
<div className="w-full mb-3"> <div className="w-full mb-3">
<div className="w-full"> <div className="w-full">
<div className="pl-7 flex items-center gap-3"> {/* <div className="pl-7 flex items-center gap-3">
<button <button
name="message" name="message"
onClick={(e) => setTab(e.target.name)} onClick={(e) => setTab(e.target.name)}
@@ -438,10 +398,24 @@ function ActiveJobsMedia(props) {
> >
Send Files Send Files
</button> </button>
</div> */}
{/* switch button */}
<div className="grid grid-cols-2">
{tabs.map((item) => (
<TabButton
key={item}
item={item}
selectedTab={selectedTab}
setSelectedTab={setSelectedTab}
/>
))}
</div> </div>
{tab == "message" ? ( {/* switch button */}
<div className="w-full bg-red-50 overflow-x-auto">
{selectedTab == "Send Message" ? (
<div className="p-2 w-full">
<textarea <textarea
className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none" className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
// rows="10" // rows="10"
style={{ resize: "none" }} style={{ resize: "none" }}
name="message" name="message"
@@ -449,8 +423,10 @@ function ActiveJobsMedia(props) {
value={messageToSend} value={messageToSend}
autoFocus autoFocus
/> />
</div>
) : ( ) : (
<div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]"> <div className="p-2 w-full">
<div className="p-4 mb-2 h-[150px] text-base text-slate-600">
<div className="files flex"> <div className="files flex">
<label <label
htmlFor="file" htmlFor="file"
@@ -482,33 +458,10 @@ function ActiveJobsMedia(props) {
))} ))}
</div> </div>
</div> </div>
</div>
)} )}
</div>
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
<div className="w-full">
{/* error or success display */}
{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>
)
))}
</div>
{/* End of error or success display */}
{/* Buttons Sections */} {/* Buttons Sections */}
<div className="py-1 grid grid-cols-1 xxs:grid-cols-3"> <div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4"> <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
<button <button
type="button" type="button"
@@ -517,7 +470,7 @@ function ActiveJobsMedia(props) {
> >
<span className="text-gradient">Clear</span> <span className="text-gradient">Clear</span>
</button> </button>
{tab == "files" ? ( {selectedTab == "Send Files" ? (
<button <button
onClick={sendFile} onClick={sendFile}
type="button" type="button"
@@ -558,6 +511,30 @@ function ActiveJobsMedia(props) {
</div> </div>
{/* end of Buttons Sections */} {/* end of Buttons Sections */}
</div> </div>
</div>
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
<div className="w-full">
{/* error or success display */}
{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>
)
))}
</div>
{/* End of error or success display */}
</div>
{/* END OF TEXTAREA */} {/* END OF TEXTAREA */}
{/* MESSAGE SECTION */} {/* MESSAGE SECTION */}
src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
+4 -4
View File
@@ -60,12 +60,12 @@ function CurrentTaskAction({jobDetails}) {
} }
return ( return (
<div className='dark:bg-black'> <div className='h-full dark:bg-black'>
<div className="w-full text-sm text-left text-gray-500"> <div className="h-full w-full text-sm text-left text-gray-500">
{jobDetails.job_type == 'MEDIA' ? {jobDetails.job_type == 'MEDIA' ?
<div className="flex justify-center items-center"> <div className="h-full flex justify-center items-center">
<button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"> <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
I have completed this task I have completed this task
</button> </button>
</div> </div>
src/components/Partials/MediaLayout.jsx
+3 -17
View File
@@ -53,20 +53,9 @@ export default function MediaLayout({backpath, title, children }) {
return ( return (
<> <>
<div className="nft-main-wrapper-layout media container mx-auto"> <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
<div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}> <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
{/* sidebar */} <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
{/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
{/* <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />*/}
{/*</div>*/}
{/*{MobileSideBar && (*/}
{/* <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>*/}
{/*)}*/}
{/*<div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>*/}
{/* <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />*/}
{/*</div>*/}
{/* end sidebar */}
<div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px] h-full`}>
{/* header */} {/* 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"> <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} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} /> <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
@@ -76,9 +65,6 @@ export default function MediaLayout({backpath, title, children }) {
<div className="nft-main-container_media flex-[100%] w-full"> <div className="nft-main-container_media flex-[100%] w-full">
{children && children} {children && children}
</div> </div>
{/*<div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">*/}
{/* <RightSideBar myJobList={userJobList} />*/}
{/*</div>*/}
</div> </div>
</div> </div>
</div> </div>