Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
388e49467e | ||
 ameye
|
043718837d | ||
|
ameye
|
d0e2ba0aa3 | ||
|
victorAnumudu
|
a1dc72e5b0 |
+243
-243
@@ -73,8 +73,7 @@ function AddJob({ popUpHandler, categories }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
|
||||
<Formik
|
||||
<Formik
|
||||
initialValues={IV}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleAddJob}
|
||||
@@ -82,281 +81,282 @@ function AddJob({ popUpHandler, categories }) {
|
||||
{(props) => {
|
||||
return (
|
||||
<Form>
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<div className="fields w-full">
|
||||
{/* inputs starts here */}
|
||||
<div className="xl:flex xl:space-x-7 mb-[5px]">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Currency</span>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.country}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="country"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{walletDetails?.loading ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : walletDetails.data.length ? (
|
||||
<>
|
||||
<div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<div className="fields w-full">
|
||||
{/* inputs starts here */}
|
||||
<div className="xl:flex xl:space-x-7 mb-[5px]">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Currency</span>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.country}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="country"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{walletDetails?.loading ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select a currency
|
||||
Loading...
|
||||
</option>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.description}
|
||||
) : walletDetails.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select a currency
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
No Options Found! Try Again
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.description}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
No Options Found! Try Again
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6 text-right flex"
|
||||
label="Price"
|
||||
labelClass=""
|
||||
type="number"
|
||||
name="price"
|
||||
placeholder="0"
|
||||
value={props.values.price}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={
|
||||
props.errors.price &&
|
||||
props.touched.price &&
|
||||
props.errors.price
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="field w-full">
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<InputCom
|
||||
fieldClass="px-6 text-right flex"
|
||||
label="Price"
|
||||
fieldClass="px-6"
|
||||
label="Title"
|
||||
labelClass=""
|
||||
type="number"
|
||||
name="price"
|
||||
placeholder="0"
|
||||
value={props.values.price}
|
||||
type="text"
|
||||
name="title"
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={
|
||||
props.errors.price &&
|
||||
props.touched.price &&
|
||||
props.errors.price
|
||||
props.errors.title &&
|
||||
props.touched.title &&
|
||||
props.errors.title
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Title"
|
||||
labelClass=""
|
||||
type="text"
|
||||
name="title"
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={
|
||||
props.errors.title &&
|
||||
props.touched.title &&
|
||||
props.errors.title
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Description"
|
||||
labelClass=""
|
||||
type="text"
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={
|
||||
props.errors.description &&
|
||||
props.touched.description &&
|
||||
props.errors.description
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
Job Delivery Details
|
||||
{props.errors.job_detail &&
|
||||
props.touched.job_detail && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.job_detail}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="5"
|
||||
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={props.values.job_detail}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Description"
|
||||
labelClass=""
|
||||
type="text"
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={
|
||||
props.errors.description &&
|
||||
props.touched.description &&
|
||||
props.errors.description
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:w-[35%] w-full">
|
||||
<label
|
||||
htmlFor="Job Categories"
|
||||
className='job-label'
|
||||
id="checked-group"
|
||||
>
|
||||
Categories
|
||||
</label>
|
||||
<div
|
||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||
role="group"
|
||||
aria-labelledby="checked-group"
|
||||
>
|
||||
{categories ? (
|
||||
<>
|
||||
{Object?.entries(categories).map(([key, value]) => (
|
||||
<label
|
||||
key={key}
|
||||
className="flex gap-1 w-full items-center"
|
||||
>
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="category"
|
||||
value={key}
|
||||
/>
|
||||
<span className="text-[13.975px]">{value}</span>
|
||||
</label>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<label className="flex gap-1 w-full items-center">
|
||||
<Field type="checkbox" name="category" />
|
||||
<span className="text-[13.975px]">null</span>
|
||||
</label>
|
||||
)}
|
||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
||||
{props.errors.category &&
|
||||
props.touched.category &&
|
||||
"please select a category"}
|
||||
</span>
|
||||
{/* Details */}
|
||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
Job Delivery Details
|
||||
{props.errors.job_detail &&
|
||||
props.touched.job_detail && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.job_detail}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="5"
|
||||
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={props.values.job_detail}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:w-[35%] w-full">
|
||||
<label
|
||||
htmlFor="Job Categories"
|
||||
className='job-label'
|
||||
id="checked-group"
|
||||
>
|
||||
Categories
|
||||
</label>
|
||||
<div
|
||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||
role="group"
|
||||
aria-labelledby="checked-group"
|
||||
>
|
||||
{categories ? (
|
||||
<>
|
||||
{Object?.entries(categories).map(([key, value]) => (
|
||||
<label
|
||||
key={key}
|
||||
className="flex gap-1 w-full items-center"
|
||||
>
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="category"
|
||||
value={key}
|
||||
/>
|
||||
<span className="text-[13.975px]">{value}</span>
|
||||
</label>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<label className="flex gap-1 w-full items-center">
|
||||
<Field type="checkbox" name="category" />
|
||||
<span className="text-[13.975px]">null</span>
|
||||
</label>
|
||||
)}
|
||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
||||
{props.errors.category &&
|
||||
props.touched.category &&
|
||||
"please select a category"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-[5px]">
|
||||
<div className={`flex items-center justify-between mb-2.5`}>
|
||||
<label
|
||||
className="job-label"
|
||||
htmlFor="timeline_days"
|
||||
>
|
||||
Timeline
|
||||
<span className="text-green-700 text-sm tracking-wide">
|
||||
- Expected duration of this task
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
component="select"
|
||||
name="timeline_days"
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
|
||||
props.errors.timeline_days &&
|
||||
props.touched.timeline_days
|
||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||
}`}
|
||||
value={props.values.timeline_days}
|
||||
>
|
||||
<option value="">Select Duration</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
key={idx}
|
||||
className="text-slate-500 text-lg"
|
||||
value={duration}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<div className={`flex items-center justify-between mb-2.5`}>
|
||||
<label
|
||||
className="job-label"
|
||||
htmlFor="timeline_days"
|
||||
>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</Field>
|
||||
</div>
|
||||
{/* inputs ends here */}
|
||||
</div>
|
||||
</div>
|
||||
Timeline
|
||||
<span className="text-green-700 text-sm tracking-wide">
|
||||
- Expected duration of this task
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<div className="content-footer 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}
|
||||
<Field
|
||||
component="select"
|
||||
name="timeline_days"
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
|
||||
props.errors.timeline_days &&
|
||||
props.touched.timeline_days
|
||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||
}`}
|
||||
value={props.values.timeline_days}
|
||||
>
|
||||
<option value="">Select Duration</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
key={idx}
|
||||
className="text-slate-500 text-lg"
|
||||
value={duration}
|
||||
>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</Field>
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
{/* inputs ends here */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<div className="content-footer w-full">
|
||||
{/* error or success display */}
|
||||
{requestStatus.message != "" &&
|
||||
(!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]`}
|
||||
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>
|
||||
)
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
|
||||
<div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
||||
<div className="flex items-center space-x-4 mr-9">
|
||||
<button
|
||||
type="button"
|
||||
className="text-18 tracking-wide h-11 flex justify-center items-center border border-light-red text-base rounded-full text-light-red cursor-pointer"
|
||||
>
|
||||
<span
|
||||
className="px-2"
|
||||
onClick={popUpHandler}
|
||||
>
|
||||
{" "}
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{requestStatus?.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Add Job
|
||||
</button>
|
||||
)}
|
||||
</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>
|
||||
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
|
||||
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="custom-btn border border-light-red text-light-red"
|
||||
>
|
||||
<span
|
||||
className="px-2"
|
||||
onClick={popUpHandler}
|
||||
>
|
||||
{" "}
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{requestStatus?.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
Add Job
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -46,15 +46,15 @@ export default function OfferCard({
|
||||
</h1>
|
||||
|
||||
<div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col justify-between items-center border-r-2">
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{/* <div className="flex flex-col justify-between items-center border-r-2">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Task Code
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{datas.contract}
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="flex flex-col justify-between items-center">
|
||||
<p className="text-sm text-red-500 tracking-wide">Expires</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
|
||||
@@ -350,7 +350,7 @@ function ActiveJobsMedia(props) {
|
||||
</div>
|
||||
|
||||
{/* job details */}
|
||||
<div className="w-full md:w-[200px]">
|
||||
<div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
|
||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||
{passDue ? (
|
||||
<div className="my-1">
|
||||
|
||||
@@ -119,7 +119,7 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
|
||||
</div>
|
||||
</div>
|
||||
{/* trending products */}
|
||||
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
|
||||
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue dark:bg-dark-white/50 transition-all duration-300">
|
||||
<SliderCom selector={trendingSlider} settings={settings}>
|
||||
{familyOffers &&
|
||||
familyOffers.length > 0 &&
|
||||
|
||||
@@ -54,8 +54,8 @@ export default function Layout({ children }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="nft-main-wrapper-layout w-full 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-main-wrapper-layout container mx-auto">
|
||||
<div className={`relative nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
|
||||
{/* sidebar */}
|
||||
<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} />
|
||||
@@ -73,7 +73,7 @@ export default function Layout({ children }) {
|
||||
<Header 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">
|
||||
<div className="nft-container container mx-auto 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">
|
||||
<div className="flex-[80%] w-full">
|
||||
{children && children}
|
||||
</div>
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function MediaLayout({backpath, title, children }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="nft-main-wrapper-layout media">
|
||||
<div className="nft-main-wrapper-layout media container 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`}>
|
||||
{/* sidebar */}
|
||||
{/*<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]`}>*/}
|
||||
@@ -72,7 +72,7 @@ export default function MediaLayout({backpath, title, children }) {
|
||||
<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">
|
||||
<div className="nft-container container mx-auto 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">
|
||||
<div className="nft-main-container_media flex-[100%] w-full">
|
||||
{children && children}
|
||||
</div>
|
||||
|
||||
@@ -247,101 +247,101 @@ 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-screen max-h-[600px]">
|
||||
<Suspense fallback={<Fallback />}>
|
||||
<Iframe
|
||||
src={process.env.REACT_APP_FAM_GAME_LINK}
|
||||
title='Games'
|
||||
/>
|
||||
</Suspense>
|
||||
<div className="mb-4 w-full h-screen max-h-[650px]">
|
||||
<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">
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<div className="w-full h-30">
|
||||
<div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
|
||||
{/* <p className="w-full text-base text-right text-sky-blue">
|
||||
{props?.details && props.details.job_to}
|
||||
</p>
|
||||
<div className="text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Description:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8 border-b border-sky-blue">
|
||||
{props?.details && props.details.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 w-full lg:flex gap-8">
|
||||
<div className="w-full text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Delivery Detail:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8">
|
||||
{props?.details && props.details.job_description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-2 lg:my-0">
|
||||
<IndexJobActions details={props.details} />
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* job details */}
|
||||
<div className="w-full md:w-[200px] h-20">
|
||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||
{/* {passDue ? (
|
||||
<div className="my-1">
|
||||
<p className="text-base text-slate-700">
|
||||
<span className="font-semibold">Due: </span>
|
||||
{props?.details && props.details.delivery_date.split(" ")[0]}
|
||||
</p>
|
||||
{props?.delivery_date && (
|
||||
<p className="py-2 text-base text-slate-700">
|
||||
{props.details.delivery_date.split(" ")[1]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="my-1 flex items-start gap-3">
|
||||
<p className="font-semibold">Due: </p>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-slate-700 tracking-wide">
|
||||
<CountDown
|
||||
lastDate={props?.details && props.details.delivery_date}
|
||||
/>
|
||||
</p>
|
||||
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</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">
|
||||
Reward:{" "}
|
||||
</span>
|
||||
<span className="">{thePrice}</span>
|
||||
</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">
|
||||
Duration:{" "}
|
||||
</span>
|
||||
<span className="">
|
||||
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
||||
day(s)
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* end of job details */}
|
||||
</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 flex flex-col justify-between">
|
||||
<div className="w-full h-30">
|
||||
<div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
|
||||
{/* <p className="w-full text-base text-right text-sky-blue">
|
||||
{props?.details && props.details.job_to}
|
||||
</p>
|
||||
<div className="text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Description:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8 border-b border-sky-blue">
|
||||
{props?.details && props.details.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 w-full lg:flex gap-8">
|
||||
<div className="w-full text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Delivery Detail:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8">
|
||||
{props?.details && props.details.job_description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-2 lg:my-0">
|
||||
<IndexJobActions details={props.details} />
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* job details */}
|
||||
<div className="w-full md:w-[200px] h-20">
|
||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||
{/* {passDue ? (
|
||||
<div className="my-1">
|
||||
<p className="text-base text-slate-700">
|
||||
<span className="font-semibold">Due: </span>
|
||||
{props?.details && props.details.delivery_date.split(" ")[0]}
|
||||
</p>
|
||||
{props?.delivery_date && (
|
||||
<p className="py-2 text-base text-slate-700">
|
||||
{props.details.delivery_date.split(" ")[1]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="my-1 flex items-start gap-3">
|
||||
<p className="font-semibold">Due: </p>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-slate-700 tracking-wide">
|
||||
<CountDown
|
||||
lastDate={props?.details && props.details.delivery_date}
|
||||
/>
|
||||
</p>
|
||||
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</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">
|
||||
Reward:{" "}
|
||||
</span>
|
||||
<span className="">{thePrice}</span>
|
||||
</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">
|
||||
Duration:{" "}
|
||||
</span>
|
||||
<span className="">
|
||||
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
||||
day(s)
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* end of job details */}
|
||||
</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-1/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="w-full mb-3 hidden">
|
||||
<div className="w-full">
|
||||
|
||||
@@ -125,27 +125,6 @@ function DeleteJobPopout({ details, onClose, situation }) {
|
||||
<span className="job-label">Duration: </span>{details.timeline_days} day(s)
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2.5">
|
||||
<button
|
||||
onClick={onClose}
|
||||
type="button"
|
||||
className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Cancel</span>
|
||||
</button>
|
||||
{requestStatus.laoding ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
onClick={() => deleteJob(details)}
|
||||
type="button"
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
Confirm Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
@@ -165,6 +144,28 @@ function DeleteJobPopout({ details, onClose, situation }) {
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
</div>
|
||||
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
|
||||
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
|
||||
<button
|
||||
onClick={onClose}
|
||||
type="button"
|
||||
className="custom-btn border-gradient"
|
||||
>
|
||||
<span className="text-gradient">Cancel</span>
|
||||
</button>
|
||||
{requestStatus.laoding ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
onClick={() => deleteJob(details)}
|
||||
type="button"
|
||||
className="custom-btn text-white primary-gradient"
|
||||
>
|
||||
Confirm Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalCom>
|
||||
);
|
||||
|
||||
@@ -242,7 +242,6 @@ const EditJobPopOut = ({
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
@@ -250,277 +249,276 @@ const EditJobPopOut = ({
|
||||
>
|
||||
{(props) => (
|
||||
<Form className="w-full">
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<div className="fields w-full">
|
||||
<div className="xl:flex xl:space-x-7 mb-[0.5rem]">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<div className="fields w-full">
|
||||
<div className="xl:flex xl:space-x-7 mb-[0.5rem]">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
fieldClass="px-6 cursor-default"
|
||||
label="Currency"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6 text-right"
|
||||
label="Price"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="number"
|
||||
name="price"
|
||||
value={props.values.price}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
errorBorder={
|
||||
props.errors.price && props.touched.price
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[0.5rem]">
|
||||
<InputCom
|
||||
fieldClass="px-6 cursor-default"
|
||||
label="Currency"
|
||||
fieldClass="px-6"
|
||||
label="Title"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
inputClass=" input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
name="title"
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
disable={true}
|
||||
errorBorder={props.errors.title && props.touched.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="field w-full">
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-[0.5rem]">
|
||||
<InputCom
|
||||
fieldClass="px-6 text-right"
|
||||
label="Price"
|
||||
fieldClass="px-6"
|
||||
label="Description"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="number"
|
||||
name="price"
|
||||
value={props.values.price}
|
||||
inputClass=" input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
errorBorder={
|
||||
props.errors.price && props.touched.price
|
||||
props.errors.description && props.touched.description
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[0.5rem]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Title"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass=" input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="title"
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
errorBorder={props.errors.title && props.touched.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-[0.5rem]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Description"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass=" input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
errorBorder={
|
||||
props.errors.description && props.touched.description
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="job-label"
|
||||
className='job-label'
|
||||
>
|
||||
Job Delivery Details
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="5"
|
||||
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
|
||||
props.errors.job_detail && props.touched.job_detail
|
||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||
} rounded-[10px]`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={props.values.job_detail}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:w-[35%] w-full">
|
||||
<div
|
||||
htmlFor="Job Categories"
|
||||
className='job-label'
|
||||
id="checked-group"
|
||||
>
|
||||
Categories
|
||||
{/* Details */}
|
||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="job-label"
|
||||
className='job-label'
|
||||
>
|
||||
Job Delivery Details
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="5"
|
||||
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
|
||||
props.errors.job_detail && props.touched.job_detail
|
||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||
} rounded-[10px]`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={props.values.job_detail}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||
role="group"
|
||||
aria-labelledby="checked-group"
|
||||
>
|
||||
{categories &&
|
||||
Object.entries(categories)?.map(([key, value]) => (
|
||||
<label
|
||||
key={key}
|
||||
className="flex gap-1 w-full items-center dark:text-white"
|
||||
>
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="category"
|
||||
value={key}
|
||||
/>
|
||||
<span className="text-[13.975px]">{value}</span>
|
||||
</label>
|
||||
))}
|
||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
||||
{props.errors.category &&
|
||||
props.touched.category &&
|
||||
"please select a category"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-2 mb-2">
|
||||
{/* FOR TASK IMAGE */}
|
||||
<div className="w-1/2 relative max-h-[130px] min-h-[130px]">
|
||||
<input
|
||||
id="task_image"
|
||||
className="hidden"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={taskImgChangeHandler}
|
||||
/>
|
||||
{taskImage ? (
|
||||
<div className="w-full absolute -top-5">
|
||||
<img
|
||||
src={taskImage}
|
||||
className="max-h-[150px] min-h-[150px] w-full object-cover"
|
||||
alt="uploaded task"
|
||||
/>
|
||||
<span
|
||||
onClick={() => setTaskImage("")}
|
||||
className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
|
||||
>
|
||||
Remove Image
|
||||
|
||||
<div className="sm:w-[35%] w-full">
|
||||
<div
|
||||
htmlFor="Job Categories"
|
||||
className='job-label'
|
||||
id="checked-group"
|
||||
>
|
||||
Categories
|
||||
</div>
|
||||
<div
|
||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||
role="group"
|
||||
aria-labelledby="checked-group"
|
||||
>
|
||||
{categories &&
|
||||
Object.entries(categories)?.map(([key, value]) => (
|
||||
<label
|
||||
key={key}
|
||||
className="flex gap-1 w-full items-center dark:text-white"
|
||||
>
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="category"
|
||||
value={key}
|
||||
/>
|
||||
<span className="text-[13.975px]">{value}</span>
|
||||
</label>
|
||||
))}
|
||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
||||
{props.errors.category &&
|
||||
props.touched.category &&
|
||||
"please select a category"}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<label
|
||||
className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
|
||||
htmlFor="task_image"
|
||||
>
|
||||
Select Task Image
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
{/* END OF TASK IMAGE */}
|
||||
|
||||
<div className="field w-1/2">
|
||||
<div className={`flex items-center justify-between`}>
|
||||
<label
|
||||
className="job-label flex flex-col"
|
||||
htmlFor="timeline_days"
|
||||
>
|
||||
Timeline -
|
||||
<span className="w-full text-center text-green-700 text-sm tracking-wide">
|
||||
Expected duration of this task
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
component="select"
|
||||
name="timeline_days"
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
|
||||
props.errors.timeline_days &&
|
||||
props.touched.timeline_days
|
||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||
}`}
|
||||
value={props.values.timeline_days}
|
||||
>
|
||||
<option value="">Select Duration</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
key={duration}
|
||||
className="text-slate-500 text-lg"
|
||||
value={duration}
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-2 mb-2">
|
||||
{/* FOR TASK IMAGE */}
|
||||
<div className="w-1/2 relative max-h-[130px] min-h-[130px]">
|
||||
<input
|
||||
id="task_image"
|
||||
className="hidden"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={taskImgChangeHandler}
|
||||
/>
|
||||
{taskImage ? (
|
||||
<div className="w-full absolute -top-5">
|
||||
<img
|
||||
src={taskImage}
|
||||
className="max-h-[150px] min-h-[150px] w-full object-cover"
|
||||
alt="uploaded task"
|
||||
/>
|
||||
<span
|
||||
onClick={() => setTaskImage("")}
|
||||
className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
|
||||
>
|
||||
Remove Image
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<label
|
||||
className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
|
||||
htmlFor="task_image"
|
||||
>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</Field>
|
||||
Select Task Image
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
{/* END OF TASK IMAGE */}
|
||||
|
||||
<div className="field w-1/2">
|
||||
<div className={`flex items-center justify-between`}>
|
||||
<label
|
||||
className="job-label flex flex-col"
|
||||
htmlFor="timeline_days"
|
||||
>
|
||||
Timeline -
|
||||
<span className="w-full text-center text-green-700 text-sm tracking-wide">
|
||||
Expected duration of this task
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
component="select"
|
||||
name="timeline_days"
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
|
||||
props.errors.timeline_days &&
|
||||
props.touched.timeline_days
|
||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||
}`}
|
||||
value={props.values.timeline_days}
|
||||
>
|
||||
<option value="">Select Duration</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
key={duration}
|
||||
className="text-slate-500 text-lg"
|
||||
value={duration}
|
||||
>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
{/* inputs ends here */}
|
||||
</div>
|
||||
{/* inputs ends here */}
|
||||
</div>
|
||||
</div>
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<div className="content-footer 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 && (
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<div className="content-footer w-full">
|
||||
{/* error or success display */}
|
||||
{requestStatus.message != "" &&
|
||||
(!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]`}
|
||||
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>
|
||||
)
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
|
||||
{/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
|
||||
<div className="w-full">
|
||||
{uploadStatus.message && !uploadStatus.loading && (
|
||||
<p
|
||||
className={`text-center ${
|
||||
uploadStatus.status
|
||||
? "text-green-500"
|
||||
: "text-red-500"
|
||||
}`}
|
||||
>
|
||||
{uploadStatus.message}
|
||||
</p>
|
||||
)}
|
||||
{uploadStatus.loading && (
|
||||
<p className="text-center">{uploadStatus.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
||||
<div className="flex items-center space-x-4 mr-2 mt-2">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
// className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||
disabled={
|
||||
requestStatus.loading || uploadStatus.loading
|
||||
}
|
||||
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 */}
|
||||
|
||||
{/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
|
||||
<div className="w-full">
|
||||
{uploadStatus.message && !uploadStatus.loading && (
|
||||
<p
|
||||
className={`text-center ${
|
||||
uploadStatus.status
|
||||
? "text-green-500"
|
||||
: "text-red-500"
|
||||
}`}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
{uploadStatus.message}
|
||||
</p>
|
||||
)}
|
||||
{uploadStatus.loading && (
|
||||
<p className="text-center">{uploadStatus.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer-wrapper justify-end">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
// className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||
disabled={
|
||||
requestStatus.loading || uploadStatus.loading
|
||||
}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</ModalCom>
|
||||
);
|
||||
|
||||
+1
-1
@@ -174,7 +174,7 @@
|
||||
|
||||
/* modal footer */
|
||||
.modal-footer-wrapper{
|
||||
@apply py-2 px-4 border-t-2 flex justify-between items-center
|
||||
@apply p-4 border-t-2 flex justify-between items-center
|
||||
}
|
||||
/* END OF STYLES FOR MODAL BOX */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user