input error position changed

src/components/AddJob/AddJob.jsx

@@ -23,15 +23,15 @@ const validationSchema = Yup.object().shape({
     })
     .required("Price is required"),
   title: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
-    .max(100, "Maximum 25 characters")
+    .max(45, "Maximum 45 characters")
     .required("Title is required"),
   description: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
     .max(250, "Maximum 250 characters")
     .required("Description is required"),
   job_detail: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
     .max(250, "Maximum 250 characters")
     .required("Details is required"),
   timeline_days: Yup.number()
@@ -162,19 +162,16 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
                         htmlFor="country"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
                       >
                         Currency
+                        {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>}
                       </label>
                       <select
                         id="country"
                         name="country"
                         value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                          props.errors.country && props.touched.country
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        }`}
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
@@ -218,7 +215,7 @@ function AddJob({ popUpHandler, categories }) {
                         value={props.values.price}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
-                        errorBorder={props.errors.price && props.touched.price}
+                        error={props.errors.price && props.touched.price && props.errors.price}
                       />
                     </div>
                   </div>
@@ -236,7 +233,7 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={props.errors.title && props.touched.title}
+                      error={props.errors.title && props.touched.title && props.errors.title}
                     />
                   </div>
 
@@ -252,9 +249,7 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={
+                      error={props.errors.description && props.touched.description && props.errors.description}
-                        props.errors.description && props.touched.description
-                      }
                     />
                   </div>
 
@@ -263,18 +258,15 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="sm:w-[60%] w-full">
                       <label
                         htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
                       >
                         Job Delivery Details
+                        {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>}
                       </label>
                       <textarea
                         id="Job Delivery Details"
                         rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
-                          props.errors.job_detail && props.touched.job_detail
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        } rounded-[10px]`}
                         style={{ resize: "none" }}
                         name="job_detail"
                         value={props.values.job_detail}

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>
+  );
+}

src/components/Cards/ResourceBlogCard.jsx

@@ -1,10 +1,6 @@
 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";
-
-import Image from '../../assets/images/Linkedin.png'
 
 export default function ProductCardStyleTwo({
   className,
@@ -36,8 +32,8 @@ export default function ProductCardStyleTwo({
           <div
             className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
             style={{
-              background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              // background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-            // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+            background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -54,9 +50,9 @@ export default function ProductCardStyleTwo({
         </div>
         <div className="details-area">
           {/* title */}
-          <a href={datas.guid} target="_blank" className="mb-2.5">
+          <a href={datas.guid} target="_blank" className="mb-2.5" rel="noreferrer">
             <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-              {datas.post_title}
+              {datas.post_title || "dummy title..."}
             </h1>
           </a>
           <div className="flex justify-between">
@@ -66,6 +62,7 @@ export default function ProductCardStyleTwo({
                 href={datas.guid}
                 target="_blank"
                 className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                rel="noreferrer"
               >
                 View
               </a>

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,6 +52,35 @@ 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 && (

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -22,7 +22,7 @@ export default function InputCom({
   spanTag,
   inputBg,
   direction,
-  errorBorder,
+  error,
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -48,7 +48,7 @@ export default function InputCom({
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
         {label && (
           <label
-            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
             htmlFor={name}
           >
             {label}
@@ -62,6 +62,8 @@ export default function InputCom({
                 {spanTag}
               </span>
             )}
+            {/* displays error is any */}
+            {error && <span className="text-[12px] text-red-500">{error}</span>} 
           </label>
         )}
         {forgotPassword && (
@@ -74,11 +76,7 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border ${
+        className={`input-wrapper border w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
-          errorBorder
-            ? "border-[#ff0a0a63] border-[0.5px] shadow-red-500 animate-shake"
-            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-        } w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
       >
         <input
           placeholder={placeholder}

src/components/Helpers/SearchCom.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Icons from "./Icons";
 
-export default function SearchCom({ className, inputClasses }) {
+export default function SearchCom({ className, inputClasses, placeholder }) {
   return (
     <div
       className={`w-full h-[48px]  pl-8 flex rounded-full overflow-hidden bg-white dark:bg-dark-white   ${
@@ -17,7 +17,7 @@ export default function SearchCom({ className, inputClasses }) {
             inputClasses || ""
           }`}
           type="text"
-          placeholder="Search items, collections..."
+          placeholder={placeholder || 'Search items, collections...'}
         />
       </div>
     </div>

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="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2 flex-1 lg:gap-8">
-          <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=" w-full h-full bg-white dark:bg-dark-white  flex-[50%] rounded-2xl overflow-hidden mb-10">
             <img
               src={activeAidsBanner}
               alt="banner"

src/components/Resources/index.jsx

@@ -27,7 +27,7 @@ export default function Resources(props) {
   const tab_categories = __resources?.tab_categories?.data;
   const collectionProducts = __resources?.collectiondata?.data;
   const onSaleProducts = __resources?.marketdata?.data;
-  const CreatedBits = __resources?.productdata?.data;
+  const CreatedBits = __resources?.productdata?.datas;
   const blogItems =   __resources?.blogdata?.payload;
 
   const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
@@ -60,6 +60,19 @@ export default function Resources(props) {
 
   // Tab Item Component
   const TabItem = ({ tabValue, isActive }) => {
+    let countNumber = (name) => { // FUNCTION TO DETERMINE THE COUNT NUMBER
+      if(name == 'blog'){
+        return blogItems?.blogdata?.length
+      }else if(name == 'onsale'){
+        return onSaleProducts?.length
+      }else if(name == 'owned'){
+        return ownProducts?.length
+      }else if(name == 'created'){
+        return CreatedSell?.length + CreatedBits?.length
+      }else{
+        return 0
+      }
+    }
     return (
       <li
         className={`relative group inline`}
@@ -81,7 +94,8 @@ export default function Resources(props) {
               : "text-thin-light-gray bg-[#F2B8FD]"
           }`}
         >
-          16
+          {/* 16 blog, onsale, owned,created */}
+          {countNumber(tabValue.name)}
         </span>
       </li>
     );

src/components/Resources/tabs/BlogTab.jsx

@@ -4,6 +4,7 @@ import SearchCom from "../../Helpers/SearchCom";
 import ResourceBlogCard from "../../Cards/ResourceBlogCard";
 
 export default function BlogTab({ className, blogdata }) {
+  console.log("Blog data here>> ", blogdata);
   // debugger;
   return (
     <>
@@ -12,7 +13,7 @@ export default function BlogTab({ className, blogdata }) {
           <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 />
+              <SearchCom placeholder='Search Blog Items...' />
             </div>
             {/* filer-dropdown */}
             <div className="flex-1 flex sm:justify-end">
@@ -39,6 +40,7 @@ export default function BlogTab({ className, blogdata }) {
               {/*            </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
@@ -47,7 +49,11 @@ export default function BlogTab({ className, blogdata }) {
                 endLength={blogdata?.blogdata.length}
               >
                 {({ datas }) => (
-                                    <ResourceBlogCard key={datas.id} datas={datas} bg={blogdata.image_url} />
+                  <ResourceBlogCard
+                    key={datas.id}
+                    datas={datas}
+                    bg={blogdata.image_url}
+                  />
                 )}
               </DataIteration>
             </div>