common home banner head implemented
This commit is contained in:
victorAnumudu
@@ -3,15 +3,13 @@ import { Link } from "react-router-dom";
|
||||
import RecomendedSliders from "./RecomendedSliders";
|
||||
|
||||
export default function CommonHead({ className,commonHeadData }) {
|
||||
const bannerData = commonHeadData();
|
||||
console.log("UUUUUUUU-",bannerData);
|
||||
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 || ""
|
||||
}`}
|
||||
>
|
||||
<RecomendedSliders bannerData={bannerData} />
|
||||
{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*!/*/}
|
||||
|
||||
@@ -5,20 +5,22 @@ import top3 from "../../assets/images/top-buyer-3.png";
|
||||
import top4 from "../../assets/images/top-buyer-4.png";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import SliderCom from "../Helpers/SliderCom";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function RecomendedSliders({ className ,bannerData }) {
|
||||
export default function RecomendedSliders({ className,bannerData }) {
|
||||
const settings = {
|
||||
arrows: false,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
infinite: bannerData.length > 4 ? true : false,
|
||||
autoplay: true,
|
||||
slidesToShow: 4,
|
||||
slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 426,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
infinite: bannerData.length > 2 ? true : false,
|
||||
slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
@@ -97,177 +99,32 @@ export default function RecomendedSliders({ className ,bannerData }) {
|
||||
{/*</div>*/}
|
||||
<div className="slider-content">
|
||||
<SliderCom settings={settings} selector={sellSlider}>
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
{bannerData.map((item, index) => (
|
||||
<Link key={index} to={item.link_path}>
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<div className="commonHeaderSliderItem">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white">
|
||||
This is short title
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex justify-center mb-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
Some wondersull text here and more
|
||||
</p>
|
||||
</div>
|
||||
{/* items */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex space-x-1 items-center text-purple text-xs">
|
||||
<span>(button)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
))}
|
||||
</SliderCom>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user