WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

made blog component to show first when resources link is hit

Browse Source
This commit was merged in pull request #235.
This commit is contained in:
victorAnumudu
2023-07-02 08:10:10 +01:00
parent f48297c5c0
commit e3a5952675
3 changed files with 71 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Cards/ResourceBlogCard.jsx
+66 -67
View File
@@ -4,76 +4,75 @@ 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,
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">
className,
datas,
hidden = false,
bg
}) {
// 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.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">
<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 */}
<a href={datas.guid} target="_blank" 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>
</a>
<div className="flex justify-between">
<div className="flex items-center space-x-2"></div>
<div className="my-1">
<a
href={datas.guid}
target="_blank"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
>
View
</a>
</div>
</div>
</div>
</div>
</div>
);
}
src/components/Resources/index.jsx
+4 -6
View File
@@ -23,10 +23,10 @@ export default function Resources(props) {
const __resources = props.MyResourceData;
//debugger;
// Collection Items
const collectionProducts = __resources?.collectiondata?.data;
const tab_categories = __resources?.tab_categories?.data;
const onSaleProducts = __resources?.marketdata?.data;
const CreatedSell = __resources?.marketdata?.data;
const tab_categories = __resources?.tab_categories?.data;
const collectionProducts = __resources?.collectiondata?.data;
const onSaleProducts = __resources?.marketdata?.data;
const CreatedBits = __resources?.productdata?.data;
const blogItems = __resources?.blogdata?.payload;
@@ -36,8 +36,6 @@ export default function Resources(props) {
setTab(value);
};
console.log("first")
// Category Components
const tabComponents = {
blog: <BlogTab blogdata={blogItems} />,
@@ -56,7 +54,7 @@ export default function Resources(props) {
activity: <ActivitiesTab />,
};
const defaultTabComponent = <OnSaleTab products={onSaleProducts} />;
const defaultTabComponent = <BlogTab blogdata={blogItems} />;
const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
src/components/Resources/tabs/BlogTab.jsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function BlogTab({ className, blogdata }) {
endLength={blogdata?.blogdata.length}
>
{({ datas }) => (
<ResourceBlogCard key={datas.id} datas={datas} />
<ResourceBlogCard key={datas.id} datas={datas} bg={blogdata.image_url} />
)}
</DataIteration>
</div>