Fixed Api Parameter, Banner Button Style and Slider header
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user