Home banners

src/components/Cards/HomeBannerOffersCard.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import localImgLoad from "../../lib/localImgLoad";
 
 export default function HomeBannerOffersCard(props) {
+    console.log("HomeBannerOffersCard->",props.itemData)
     return (
         <Link
             to="/my-collection/collection-item"
@@ -12,13 +13,13 @@ export default function HomeBannerOffersCard(props) {
                 <div className="content flex justify-between items-center mb-5">
                     <div>
                         <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                            <>Ab hshsh jsjsj hshdhhdjjd</>
+                            <>{props.itemData.title}</>
                         </h1>
                     </div>
                     {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
                 </div>
                 <div className="h-[233px]">
-                    BEST IMAGE IN THE WORLLD
+                    {props.itemData.description}
                 </div>
             </div>
         </Link>

src/components/Home/Hero.jsx

@@ -11,7 +11,7 @@ import SliderCom from "../Helpers/SliderCom";
 import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function Hero({ className }) {
+export default function Hero({ className,bannerList }) {
   const settings = {
     autoplay: true,
     dots: true,
@@ -105,7 +105,11 @@ export default function Hero({ className }) {
           </Link>
         </div>
       </div>
-      <HomeSliders settings={settings} sideData={sildeData}/>
+      <HomeSliders
+          settings={settings}
+          sideData={sildeData}
+          bannerList={bannerList}
+      />
     </div>
   );
 }

src/components/Home/HomeSliders.jsx

@@ -6,24 +6,29 @@ import HomeBannerOffersCard from "../Cards/HomeBannerOffersCard";
 
 
 export default function HomeSliders(props) {
+    console.log("BANNER LIST IN HomeSliders->",props.bannerList);
     // debugger;
     return (
         <>
             <div className="hero-slider relative 2xl:w-[600px] xl:w-[500px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
                 <div className="w-full">
                     <SliderCom settings={props.settings}>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
-                            <img src={slider1} alt="slider" className="w-full h-full" />
+                        {/*    <img src={slider1} alt="slider" className="w-full h-full" />*/}
-                        </div>
+                        {/*</div>*/}
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider2} alt="slider" className="w-full h-full" />
                         </div>
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider3} alt="slider" className="w-full h-full" />
                         </div>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                        {props.bannerList.map((item, index) => (
-                           <HomeBannerOffersCard />
+                            <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-                        </div>
+                                <HomeBannerOffersCard
+                                    itemData={item}
+                                />
+                            </div>
+                        ))}
                     </SliderCom>
                 </div>
             </div>

src/components/Home/index.jsx

@@ -13,7 +13,10 @@ import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
 
 
-export default function Home() {
+export default function Home(props) {
+
+    console.log("PROPS IN HOME->",props);
+
     const trending = datas.datas;
     const jobData =  datas.datas; // api calls or cache
     //getHomeDate
@@ -25,16 +28,34 @@ export default function Home() {
     return (
         <Layout>
             <div className="home-page-wrapper">
-                <Hero className="mb-10" data={userDetails} />
+                <Hero className="mb-10"
-                {/* <CreateNft />
+                      data={userDetails}
-        <TrendingSection trending={trending} className="mb-10" />*/}
+                      bannerList={props.bannerList}
+                />
                 <HomeTaskDisplay
                     jobData={jobData}
-                    className="mb-10"/>
+                    className="mb-10"
-                {/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
+                    bannerList={props.bannerList}
-                <TopSellerTopBuyerSliderSection className="mb-10" />
+                />
-                <UpdateTable className="mb-10"/>*/}
             </div>
         </Layout>
     );
 }
+// /*
+//      <Layout>
+//             <div className="home-page-wrapper">
+//                 <Hero className="mb-10" data={userDetails} />
+//                 {/* <CreateNft />
+//         <TrendingSection trending={trending} className="mb-10" />*/}
+// <HomeTaskDisplay
+//     jobData={jobData}
+//     className="mb-10"
+//     bannerList={props.bannerList}
+// />
+{/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
+                <TopSellerTopBuyerSliderSection className="mb-10" />
+                <UpdateTable className="mb-10"/>*/}
+// </div>
+// </Layout>
+
+

src/views/HomePages.jsx

@@ -3,24 +3,28 @@ import Home from "../components/Home";
 import usersService from "../services/UsersService";
 export default function HomePages() {
 
-    const [marketActiveJobList, setMarketActiveJobList] = useState([]);
+   // const [marketActiveJobList, setMarketActiveJobList] = useState([]);
+    const [bannerList, setBannerList] = useState([]);
     const api = new usersService();
 
-    const getMarketActiveJobList = async () => {
+    const getHeroJBannersList = async () => {
         try {
             const res = await api.getHeroJBanners();
-            setMarketActiveJobList(res.data);
+           // console.log("BANNERS->",res.data);
+            setBannerList(res.data?.result_list);
         } catch (error) {
-            console.log("Error getting mode");
+            console.log("Error getting BANNERS....");
         }
     };
     useEffect(() => {
-        getMarketActiveJobList();
+        getHeroJBannersList();
     }, []);
 
   return (
     <>
-      <Home />
+      <Home
+          bannerList={bannerList}
+      />
     </>
   );
 }