.

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>