From 6f259ad8ad18257bdfadf3aae62a5520f6f7db53 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Sun, 2 Jul 2023 16:24:49 +0100
Subject: [PATCH] .

---
 src/components/Cards/FamilyMarketCard.jsx     |  72 ++++++++++
 src/components/Cards/ResourceBlogCard.jsx     | 130 +++++++++---------
 src/components/FamilyAcc/FamilyMarket.jsx     |  46 +++++--
 .../MyPendingJobs/ParentWaiting.jsx           |   4 +-
 src/components/Resources/tabs/BlogTab.jsx     | 104 +++++++-------
 5 files changed, 225 insertions(+), 131 deletions(-)
 create mode 100644 src/components/Cards/FamilyMarketCard.jsx

diff --git a/src/components/Cards/FamilyMarketCard.jsx b/src/components/Cards/FamilyMarketCard.jsx
new file mode 100644
index 0000000..bb76019
--- /dev/null
+++ b/src/components/Cards/FamilyMarketCard.jsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import Icons from "../Helpers/Icons";
+
+export default function FamilyMarketCard({
+  className,
+  datas,
+  hidden = false,
+}) {
+  // debugger;
+  const [addFavorite, setValue] = useState(datas.whishlisted);
+  const [options, setOption] = useState(false);
+  const favoriteHandler = () => {
+    if (!addFavorite) {
+      setValue(true);
+      toast.success("Added to Favorite List");
+    } else {
+      setValue(false);
+      toast.warn("Remove to Favorite List");
+    }
+  };
+  return (
+    <div
+      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      <div className="flex flex-col justify-between w-full h-full">
+        <div className="thumbnail-area w-full">
+          <div
+            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            style={{
+              background: `url(${`https://blog.float.sg/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+            }}
+          >
+            <div className="product-two-options flex justify-between mb-5 relative">
+              <div className="status">
+                {datas?.isActive && (
+                  <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
+                    Active
+                  </span>
+                )}
+              </div>
+            </div>
+            {hidden && <div className="flex justify-center"></div>}
+          </div>
+        </div>
+        <div className="details-area">
+          {/* title */}
+          <Link to="/shop-details" className="mb-2.5">
+            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              {datas.post_title}
+            </h1>
+          </Link>
+          <div className="flex justify-between">
+            <div className="flex items-center space-x-2"></div>
+            <div>
+              <button
+                type="button"
+                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+              >
+                View
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Cards/ResourceBlogCard.jsx b/src/components/Cards/ResourceBlogCard.jsx
index 926af1f..1e05534 100644
--- a/src/components/Cards/ResourceBlogCard.jsx
+++ b/src/components/Cards/ResourceBlogCard.jsx
@@ -4,76 +4,70 @@ import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
 import Icons from "../Helpers/Icons";
 
-export default function ProductCardStyleTwo({
-                                                className,
-                                                datas,
-                                                hidden = false,
-                                            }) {
-   // debugger;
-    const [addFavorite, setValue] = useState(datas.whishlisted);
-    const [options, setOption] = useState(false);
-    const favoriteHandler = () => {
-        if (!addFavorite) {
-            setValue(true);
-            toast.success("Added to Favorite List");
-        } else {
-            setValue(false);
-            toast.warn("Remove to Favorite List");
-        }
-    };
-    return (
-        <div
-            className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-                className || ""
-            }`}
-        >
-            <div className="flex flex-col justify-between w-full h-full">
-                <div className="thumbnail-area w-full">
-                    <div
-                        className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
-                        style={{
-                            background: `url(${`https://blog.float.sg/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-                        }}
-                    >
-                        <div className="product-two-options flex justify-between mb-5 relative">
-                            <div className="status">
-                                {datas?.isActive && (
-                                    <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
+export default function ResourceBlogCard({
+  className,
+  datas,
+  hidden = false,
+}) {
+  // debugger;
+  const [addFavorite, setValue] = useState(datas.whishlisted);
+  const [options, setOption] = useState(false);
+  const favoriteHandler = () => {
+    if (!addFavorite) {
+      setValue(true);
+      toast.success("Added to Favorite List");
+    } else {
+      setValue(false);
+      toast.warn("Remove to Favorite List");
+    }
+  };
+
+  return (
+    <div
+      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      <div className="flex flex-col justify-between w-full h-full">
+        <div className="thumbnail-area w-full">
+          <div
+            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            style={{
+              background: `url(${`https://blog.float.sg/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+            }}
+          >
+            <div className="product-two-options flex justify-between mb-5 relative">
+              <div className="status">
+                {datas?.isActive && (
+                  <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
                     Active
                   </span>
-                                )}
-                            </div>
-
-                        </div>
-                        {hidden && (
-                            <div className="flex justify-center">
-
-                            </div>
-                        )}
-                    </div>
-                </div>
-                <div className="details-area">
-                    {/* title */}
-                    <Link to="/shop-details" className="mb-2.5">
-                        <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                            {datas.post_title}
-                        </h1>
-                    </Link>
-                    <div className="flex justify-between">
-                        <div className="flex items-center space-x-2">
-
-                        </div>
-                        <div>
-                            <button
-                                type="button"
-                                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-                            >
-                                View
-                            </button>
-                        </div>
-                    </div>
-                </div>
+                )}
+              </div>
             </div>
+            {hidden && <div className="flex justify-center"></div>}
+          </div>
         </div>
-    );
+        <div className="details-area">
+          {/* title */}
+          <Link to="/shop-details" className="mb-2.5">
+            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              {datas.post_title}
+            </h1>
+          </Link>
+          <div className="flex justify-between">
+            <div className="flex items-center space-x-2"></div>
+            <div>
+              <button
+                type="button"
+                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+              >
+                View
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/FamilyAcc/FamilyMarket.jsx b/src/components/FamilyAcc/FamilyMarket.jsx
index 246688f..39a067c 100644
--- a/src/components/FamilyAcc/FamilyMarket.jsx
+++ b/src/components/FamilyAcc/FamilyMarket.jsx
@@ -3,6 +3,11 @@ import InputCom from "../Helpers/Inputs/InputCom";
 import Layout from "../Partials/Layout";
 import SiteService from "../../services/SiteService";
 import ModalCom from "../Helpers/ModalCom";
+import DataIteration from "../Helpers/DataIteration";
+import SearchCom from "../Helpers/SearchCom";
+import collections from "../../data/collectionplan_data.json";
+import FamilyMarketCard from "../Cards/FamilyMarketCard";
+import { Link } from "react-router-dom";
 
 export default function FamilyMarket() {
   const [selectTab, setValue] = useState("today");
@@ -24,7 +29,6 @@ export default function FamilyMarket() {
     setValue(value);
   };
 
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -37,15 +41,8 @@ export default function FamilyMarket() {
                 <span
                   className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
-                  Family Market
+                  Suggest Task to the Parents
                 </span>
-                {/* <button
-                  onClick={popUpHandler}
-                  type="button"
-                  className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-                >
-                  Add
-                </button> */}
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
@@ -55,11 +52,40 @@ export default function FamilyMarket() {
               ></div>
             </div>
           </div>
+          {/* Body */}
+          <div className="filter-section w-full items-center sm:flex justify-between mb-6">
+            {/* filter-search */}
+            <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+              <SearchCom />
+            </div>
+            {/* filer-dropdown */}
+            <div className="flex-1 flex sm:justify-end">
+              <Link
+                to="/upload-product"
+                className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+              >
+                Any Other Task
+              </Link>
+            </div>
+          </div>
+          <div className="content-section w-full-width">
+            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+              <DataIteration
+                datas={collections?.data}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={collections?.data.length}
+              >
+                {({ datas }) => (
+                  <FamilyMarketCard key={datas.id} datas={datas} />
+                )}
+              </DataIteration>
+            </div>
+          </div>
         </div>
       </div>
       {popUp && (
         <ModalCom action={popUpHandler} situation={popUp}>
-         {/*  */}
+          {/*  */}
         </ModalCom>
       )}
     </Layout>
diff --git a/src/components/MyPendingJobs/ParentWaiting.jsx b/src/components/MyPendingJobs/ParentWaiting.jsx
index b092237..0363535 100644
--- a/src/components/MyPendingJobs/ParentWaiting.jsx
+++ b/src/components/MyPendingJobs/ParentWaiting.jsx
@@ -25,8 +25,8 @@ export default function ParentWaiting({ className }) {
             Waiting for Parent to Get Started...
           </h1>
         </div>
-        <div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2 flex-1">
-          <div className="lg:w-[540px] w-full h-full bg-white dark:bg-dark-white  flex-[50%] rounded-2xl overflow-hidden mb-10">
+        <div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2 flex-1 lg:gap-8">
+          <div className=" w-full h-full bg-white dark:bg-dark-white  flex-[50%] rounded-2xl overflow-hidden mb-10">
             <img
               src={activeAidsBanner}
               alt="banner"
diff --git a/src/components/Resources/tabs/BlogTab.jsx b/src/components/Resources/tabs/BlogTab.jsx
index 4b2845b..3412d41 100644
--- a/src/components/Resources/tabs/BlogTab.jsx
+++ b/src/components/Resources/tabs/BlogTab.jsx
@@ -4,56 +4,58 @@ import SearchCom from "../../Helpers/SearchCom";
 import ResourceBlogCard from "../../Cards/ResourceBlogCard";
 
 export default function BlogTab({ className, blogdata }) {
-   // debugger;
-    return (
-        <>
-            <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
-                <div className="main-container w-full">
-                    <div className="filter-section w-full items-center sm:flex justify-between mb-6">
-                        {/* filter-search */}
-                        <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
-                            <SearchCom />
-                        </div>
-                        {/* filer-dropdown */}
-                        <div className="flex-1 flex sm:justify-end">
-                {/*            <div className="flex space-x-1 items-center">*/}
-                {/*<span className="text-18 text-thin-light-gray">*/}
-                {/*  Recently Received*/}
-                {/*</span>*/}
-                {/*                <span>*/}
-                {/*  <svg*/}
-                {/*      width="20"*/}
-                {/*      height="10"*/}
-                {/*      viewBox="0 0 13 6"*/}
-                {/*      fill="none"*/}
-                {/*      xmlns="http://www.w3.org/2000/svg"*/}
-                {/*  >*/}
-                {/*    <path*/}
-                {/*        opacity="0.7"*/}
-                {/*        d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"*/}
-                {/*        fill="#374557"*/}
-                {/*        fillOpacity="0.6"*/}
-                {/*    />*/}
-                {/*  </svg>*/}
-                {/*</span>*/}
-                {/*            </div>*/}
-                        </div>
-                    </div>
-                    <div className="content-section w-full-width">
-                        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
-                            <DataIteration
-                                datas={blogdata?.blogdata}
-                                startLength={process.env.REACT_APP_ZERO_STATE}
-                                endLength={blogdata?.blogdata.length}
-                            >
-                                {({ datas }) => (
-                                    <ResourceBlogCard key={datas.id} datas={datas} />
-                                )}
-                            </DataIteration>
-                        </div>
-                    </div>
-                </div>
+
+  console.log("Blog data here>> ", blogdata)
+  // debugger;
+  return (
+    <>
+      <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
+        <div className="main-container w-full">
+          <div className="filter-section w-full items-center sm:flex justify-between mb-6">
+            {/* filter-search */}
+            <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+              <SearchCom />
             </div>
-        </>
-    );
+            {/* filer-dropdown */}
+            <div className="flex-1 flex sm:justify-end">
+              {/*            <div className="flex space-x-1 items-center">*/}
+              {/*<span className="text-18 text-thin-light-gray">*/}
+              {/*  Recently Received*/}
+              {/*</span>*/}
+              {/*                <span>*/}
+              {/*  <svg*/}
+              {/*      width="20"*/}
+              {/*      height="10"*/}
+              {/*      viewBox="0 0 13 6"*/}
+              {/*      fill="none"*/}
+              {/*      xmlns="http://www.w3.org/2000/svg"*/}
+              {/*  >*/}
+              {/*    <path*/}
+              {/*        opacity="0.7"*/}
+              {/*        d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"*/}
+              {/*        fill="#374557"*/}
+              {/*        fillOpacity="0.6"*/}
+              {/*    />*/}
+              {/*  </svg>*/}
+              {/*</span>*/}
+              {/*            </div>*/}
+            </div>
+          </div>
+          <div className="content-section w-full-width">
+            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+              <DataIteration
+                datas={blogdata?.blogdata}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={blogdata?.blogdata.length}
+              >
+                {({ datas }) => (
+                  <ResourceBlogCard key={datas.id} datas={datas} />
+                )}
+              </DataIteration>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }