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

Fixed Api Parameter, Banner Button Style and Slider header

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-27 17:11:30 +01:00
parent 5e5d953769
commit 271f5635a0
8 changed files with 186 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddJob/AddJob.jsx
+10 -8
View File
@@ -8,7 +8,7 @@ import { Field, Form, Formik } from "formik";
import * as Yup from "yup";
const validationSchema = Yup.object().shape({
currency: Yup.string()
country: Yup.string()
.min(1, "Minimum 3 characters")
.max(25, "Maximum 25 characters")
.required("Country is required"),
@@ -54,7 +54,7 @@ function AddJob({ popUpHandler, categories }) {
let initialValues = {
// initial values for formik
currency: "",
country: "",
price: "",
title: "",
description: "",
@@ -103,6 +103,9 @@ function AddJob({ popUpHandler, categories }) {
status: false,
message: "Could not complete your request at the moment",
});
setTimeout(() => {
popUpHandler();
}, 1500);
return;
}
setRequestStatus({
@@ -133,7 +136,6 @@ function AddJob({ popUpHandler, categories }) {
getUserCurrency();
}, []);
console.log("Currency >> ", currency.data);
return (
<div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
@@ -151,15 +153,15 @@ function AddJob({ popUpHandler, categories }) {
<div className="xl:flex xl:space-x-7 mb-[5px]">
<div className="field w-full mb-6 xl:mb-0">
<label
htmlFor="currency"
htmlFor="country"
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
>
Currency
</label>
<select
id="currency"
name="currency"
value={props.values.currency}
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`}
onChange={props.handleChange}
onBlur={props.handleBlur}
@@ -278,7 +280,7 @@ function AddJob({ popUpHandler, categories }) {
role="group"
aria-labelledby="checked-group"
>
{Object.entries(categories).map(([key, value]) => (
{Object?.entries(categories).map(([key, value]) => (
<label
key={key}
className="flex gap-1 w-full items-center"
src/components/Cards/HomeBannerOffersCard.jsx
+5 -5
View File
@@ -23,20 +23,20 @@ export default function HomeBannerOffersCard(props) {
}}
>
<div className="flex flex-col justify-between h-full">
<div className="content flex justify-between items-center mb-5">
<div className="content flex justify-between items-center">
<div className="siderCardHeader">
<h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
<span className="heroSilderTitle">{props.itemData.title}</span>
</h1>
</div>
</div>
<div className="h-[233px]">
<div className="flex flex-col justify-around items-center flex-1">
<div className="siderCardDescription">
{props.itemData.description}
</div>
<div className="siderCardButton">
[ {props.itemData.button_text} ]
</div>
<button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
{props.itemData.button_text}
</button>
</div>
</div>
</Link>
src/components/MarketPlace/PopUp/MarketPopUp.jsx
+6 -2
View File
@@ -1,7 +1,6 @@
import React, { useCallback, useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import ModalCom from "../../Helpers/ModalCom";
import { toast } from "react-toastify";
import { Form, Formik } from "formik";
import usersService from "../../../services/UsersService";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
@@ -106,6 +105,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
// let addedIntDate = marketInt?.added?.split(" ")[0];
let expireIntDate = marketInt?.expire?.split(" ")[0];
// let cleanedText = details?.job_description.replace(/&lt;/g, '<')
// .replace(/&gt;/g, '>')
// .replace(/&quot;/g, '"')
// .replace(/&amp;/g, '&')
return (
<ModalCom action={onClose} situation={situation} className="edit-popup">
<div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
src/components/UserHeader/CommonHead.jsx
+31 -29
View File
@@ -2,34 +2,36 @@ import React from "react";
import { Link } from "react-router-dom";
import RecomendedSliders from "./RecomendedSliders";
export default function CommonHead({ className,commonHeadData }) {
return (
<div
className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center md:p-2 p-2 bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
className || ""
}`}
>
{commonHeadData?.length > 0 && <RecomendedSliders bannerData={commonHeadData} /> }
{/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
{/* /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
{/* /!* This is common head which will appear as needed , will take many shape*!/*/}
{/* /!*</h1>*!/*/}
{/* /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
{/* /!* some space for extra texts here*!/*/}
{/* /!*</p>*!/*/}
{/* */}
{/*</div>*/}
{/*<div className="flex-1 flex lg:justify-end">*/}
{/* <div className="flex items-center space-x-5">*/}
{/* <Link*/}
{/* to="/mytask"*/}
{/* className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
{/* >*/}
{/* View Task*/}
{/* </Link>*/}
export default function CommonHead({ className, commonHeadData }) {
return (
<div
className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center md:p-2 p-2 bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
className || ""
}`}
>
{commonHeadData?.length > 0 && (
<RecomendedSliders bannerData={commonHeadData} />
)}
{/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
{/* /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
{/* /!* This is common head which will appear as needed , will take many shape*!/*/}
{/* /!*</h1>*!/*/}
{/* /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
{/* /!* some space for extra texts here*!/*/}
{/* /!*</p>*!/*/}
{/* */}
{/*</div>*/}
{/*<div className="flex-1 flex lg:justify-end">*/}
{/* <div className="flex items-center space-x-5">*/}
{/* <Link*/}
{/* to="/mytask"*/}
{/* className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
{/* >*/}
{/* View Task*/}
{/* </Link>*/}
{/* </div>*/}
{/*</div>*/}
</div>
);
{/* </div>*/}
{/*</div>*/}
</div>
);
}
src/components/UserHeader/RecomendedSliders.jsx
+124 -122
View File
@@ -7,126 +7,128 @@ import Icons from "../Helpers/Icons";
import SliderCom from "../Helpers/SliderCom";
import { Link } from "react-router-dom";
export default function RecomendedSliders({ className,bannerData }) {
const settings = {
arrows: false,
dots: false,
infinite: bannerData.length > 4 ? true : false,
autoplay: true,
slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
slidesToScroll: 1,
responsive: [
{
breakpoint: 426,
settings: {
infinite: bannerData.length > 2 ? true : false,
slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
slidesToScroll: 1,
},
},
],
};
const sellSlider = useRef(null);
const buySlider = useRef(null);
const prevHandler = (value) => {
if (value === "sell") {
sellSlider.current.slickPrev();
}
if (value === "buy") {
buySlider.current.slickPrev();
}
};
const nextHandler = (value) => {
if (value === "sell") {
sellSlider.current.slickNext();
}
if (value === "buy") {
buySlider.current.slickNext();
}
};
return (
<>
{/*<div className="heading flex justify-between items-center mb-4">*/}
{/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
{/* Top Seller*/}
{/* </h1>*/}
{/* <div className="slider-btns flex space-x-4">*/}
{/* <button*/}
{/* onClick={() => nextHandler("sell")}*/}
{/* type="button"*/}
{/* className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
{/* >*/}
{/* <Icons name="arrows" />*/}
{/* </button>*/}
{/* <button*/}
{/* onClick={() => prevHandler("sell")}*/}
{/* type="button"*/}
{/* className="transform rotate-180"*/}
{/* >*/}
{/* <div className=" text-dark-gray dark:text-white">*/}
{/* <svg*/}
{/* width="11"*/}
{/* height="19"*/}
{/* viewBox="0 0 11 19"*/}
{/* fill="none"*/}
{/* xmlns="http://www.w3.org/2000/svg"*/}
{/* >*/}
{/* <path*/}
{/* d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
{/* stroke="url(#paint0_linear_220_23410)"*/}
{/* strokeWidth="2"*/}
{/* strokeLinecap="round"*/}
{/* strokeLinejoin="round"*/}
{/* />*/}
{/* <defs>*/}
{/* <linearGradient*/}
{/* id="paint0_linear_220_23410"*/}
{/* x1="9.09766"*/}
{/* y1="1.1499"*/}
{/* x2="-4.2474"*/}
{/* y2="7.96749"*/}
{/* gradientUnits="userSpaceOnUse"*/}
{/* >*/}
{/* <stop stopColor="#F539F8" />*/}
{/* <stop offset="0.416763" stopColor="#C342F9" />*/}
{/* <stop offset="1" stopColor="#5356FB" />*/}
{/* </linearGradient>*/}
{/* </defs>*/}
{/* </svg>*/}
{/* </div>*/}
{/* </button>*/}
{/* </div>*/}
{/*</div>*/}
<div className="slider-content">
<SliderCom settings={settings} selector={sellSlider}>
{bannerData.map((item, index) => (
<Link key={index} to={`/${item.link_path}`}>
<div className="item">
<div className={`commonHeaderSliderItem flex flex-col justify-between items-center ${item.short_style}`}>
{/* title */}
<div className="flex justify-center">
<p className="text-base font-bold text-dark-gray dark:text-white">
{item.short_title}
</p>
</div>
{/* username */}
<div className="flex justify-center mb-1">
<p className="text-xs text-thin-light-gray">
{item.short_description}
</p>
</div>
{/* items */}
<div className="flex justify-center">
<div className="flex space-x-1 items-center text-purple text-xs">
<span>{item.short_button_text}</span>
</div>
</div>
</div>
</div>
</Link>
))}
</SliderCom>
</div>
</>
);
export default function RecomendedSliders({ className, bannerData }) {
const settings = {
arrows: false,
dots: false,
infinite: bannerData.length > 4 ? true : false,
autoplay: true,
slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
slidesToScroll: 1,
responsive: [
{
breakpoint: 426,
settings: {
infinite: bannerData.length > 2 ? true : false,
slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
slidesToScroll: 1,
},
},
],
};
const sellSlider = useRef(null);
const buySlider = useRef(null);
const prevHandler = (value) => {
if (value === "sell") {
sellSlider.current.slickPrev();
}
if (value === "buy") {
buySlider.current.slickPrev();
}
};
const nextHandler = (value) => {
if (value === "sell") {
sellSlider.current.slickNext();
}
if (value === "buy") {
buySlider.current.slickNext();
}
};
return (
<>
{/*<div className="heading flex justify-between items-center mb-4">*/}
{/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
{/* Top Seller*/}
{/* </h1>*/}
{/* <div className="slider-btns flex space-x-4">*/}
{/* <button*/}
{/* onClick={() => nextHandler("sell")}*/}
{/* type="button"*/}
{/* className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
{/* >*/}
{/* <Icons name="arrows" />*/}
{/* </button>*/}
{/* <button*/}
{/* onClick={() => prevHandler("sell")}*/}
{/* type="button"*/}
{/* className="transform rotate-180"*/}
{/* >*/}
{/* <div className=" text-dark-gray dark:text-white">*/}
{/* <svg*/}
{/* width="11"*/}
{/* height="19"*/}
{/* viewBox="0 0 11 19"*/}
{/* fill="none"*/}
{/* xmlns="http://www.w3.org/2000/svg"*/}
{/* >*/}
{/* <path*/}
{/* d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
{/* stroke="url(#paint0_linear_220_23410)"*/}
{/* strokeWidth="2"*/}
{/* strokeLinecap="round"*/}
{/* strokeLinejoin="round"*/}
{/* />*/}
{/* <defs>*/}
{/* <linearGradient*/}
{/* id="paint0_linear_220_23410"*/}
{/* x1="9.09766"*/}
{/* y1="1.1499"*/}
{/* x2="-4.2474"*/}
{/* y2="7.96749"*/}
{/* gradientUnits="userSpaceOnUse"*/}
{/* >*/}
{/* <stop stopColor="#F539F8" />*/}
{/* <stop offset="0.416763" stopColor="#C342F9" />*/}
{/* <stop offset="1" stopColor="#5356FB" />*/}
{/* </linearGradient>*/}
{/* </defs>*/}
{/* </svg>*/}
{/* </div>*/}
{/* </button>*/}
{/* </div>*/}
{/*</div>*/}
<div className="slider-content">
<SliderCom settings={settings} selector={sellSlider}>
{bannerData.map((item, index) => (
<Link key={index} to={`/${item.link_path}`}>
<div className="item">
<div
className={`commonHeaderSliderItem flex gap-1 flex-col justify-between items-center ${item.short_style}`}
>
{/* title */}
<div className="flex justify-center items-center text-center">
<p className="text-base font-bold text-dark-gray dark:text-white">
{item.short_title}
</p>
</div>
{/* username */}
<div className="flex justify-center mb-1">
<p className="text-xs text-thin-light-gray text-justify">
{item.short_description}
</p>
</div>
{/* items */}
<div className="flex justify-center">
<div className="flex space-x-1 items-center text-purple text-xs">
<span>{item.short_button_text}</span>
</div>
</div>
</div>
</div>
</Link>
))}
</SliderCom>
</div>
</>
);
}
src/components/jobPopout/EditJobPopout.jsx
+4 -4
View File
@@ -10,7 +10,7 @@ import { tableReload } from "../../store/TableReloads";
import { useDispatch } from "react-redux";
const validationSchema = Yup.object().shape({
currency: Yup.string()
country: Yup.string()
.min(1, "Minimum 3 characters")
.max(25, "Maximum 25 characters")
.required("Country is required"),
@@ -60,7 +60,7 @@ const EditJobPopOut = ({
let initialValues = {
// initial values for formik
currency: details.currency,
country: details.currency,
price: details?.price,
title: details?.title,
description: details?.description,
@@ -152,8 +152,8 @@ const EditJobPopOut = ({
inputBg="bg-slate-100"
inputClass="input-curve lg border border-light-purple"
type="text"
name="currency"
value={props.values.currency}
name="country"
value={props.values.country}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
disable={true}
src/index.css
+4 -4
View File
@@ -66,12 +66,12 @@
width: 100%;
text-align: center;
}
.commonHeaderSliderItem{
.commonHeaderSliderItem {
background-color: aliceblue;
border-radius: 10px;
margin: 0px 5px 0px 5px;
height: 95px;
padding: 5px;
height: 100px;
margin: 0 5px;
padding: 10px;
}
.short_style{
src/views/MarketPlacePage.jsx
+2 -4
View File
@@ -3,13 +3,11 @@ import MarketPlace from "../components/MarketPlace";
import { useSelector } from "react-redux";
export default function MarketPlacePage() {
let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
return (
<>
<MarketPlace
commonHeadData={commonHeadBanner?.result_list} />
<MarketPlace commonHeadData={commonHeadBanner?.result_list} />
</>
);
}