added banner to family dashboard banner list

This commit was merged in pull request #574.
This commit is contained in:
victorAnumudu
2024-02-25 21:16:38 +01:00
parent 2c6e36aea9
commit de477f32ed
2 changed files with 36 additions and 25 deletions
+11 -9
View File
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import usersService from "../../services/UsersService";
import ParentWaiting from "../MyOffers/ParentWaiting";
import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
import FamilyActiveLSlde from "./FamilyActiveLSlde";
import { Link } from "react-router-dom";
import usersService from "../../services/UsersService";
export default function FamilyDash({ familyOffers, MyActiveJobList }) {
// console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
@@ -19,7 +19,7 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
try {
const res = await userApi.getFamilyBannersList();
setFamilyBannersList({loading:false, result:res.data});
// console.log('TEST RESPONSE', res)
// console.log('TEST RESPONSE', res.data)
} catch (error) {
setFamilyBannersList({loading:false, result:[]});
console.log("Error getting tasks");
@@ -38,15 +38,17 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
{process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
<>
{!familyBannersList.loading && familyBannersList?.result?.data && Object.keys(familyBannersList?.result?.data).length > 0 &&
{!familyBannersList.loading && familyBannersList?.result?.result_list && Object.keys(familyBannersList?.result?.result_list).length > 0 &&
// Loop for Family Banners
<div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
{Object.keys(familyBannersList?.result?.data).map((item, index) => {
let content = familyBannersList?.result?.data[item]
{Object.keys(familyBannersList?.result?.result_list).map((item, index) => {
let content = familyBannersList?.result?.result_list[item]
return (
<Link key={item} to='/' className={`p-2 h-40 rounded-lg shadow-sm flex justify-center items-center ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
<div className="">
{content.banner.text} for <span className="font-bold">{item}</span> content
<Link key={item} to='/' className={`p-2 h-40 rounded-lg shadow-sm flex justify-center items-center transition-all duration-300 hover:shadow-md ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
<div className="h-full w-full">
<img className="w-full h-1/2 object-cover rounded-lg" src={content.banner.image} alt='banner image' />
<h1 className="my-2 text-lg font-medium tracking-wide">{content.banner.text}</h1>
<p className="text-sm">{content.banner.description}</p>
</div>
</Link>
)