Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
9dd8f49ff8 | ||
 ameye
|
fa5e9b8107 | ||
|
Ebube
|
3e7ab11e62 | ||
|
Ebube
|
6f259ad8ad | ||
|
ameye
|
a31a20652f |
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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(${`${bg}${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`,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -4,56 +4,62 @@ 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} bg={blogdata.image_url} />
|
||||
)}
|
||||
</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 placeholder='Search Blog Items...' />
|
||||
</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}
|
||||
bg={blogdata.image_url}
|
||||
/>
|
||||
)}
|
||||
</DataIteration>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import FamilyManage from "../components/FamilyAcc/FamilyManage";
|
||||
|
||||
export default function FamilyManagePage() {
|
||||
return (
|
||||
<>
|
||||
<FamilyManage />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<FamilyManage />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user