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

Added Popup for suggest task

Browse Source
This commit was merged in pull request #240.
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-04 03:37:56 +01:00
parent 3a72ebc7a0
commit 2afffb1dc9
8 changed files with 223 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Cards/FamilyMarketCard.jsx
+57 -54
View File
@@ -1,72 +1,75 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import localImgLoad from "../../lib/localImgLoad";
import getTimeAgo from "../../lib/getTimeAgo";
import Icons from "../Helpers/Icons";
import SuggestTask from "../FamilyPopup/SuggestTask";
export default function FamilyMarketCard({
className,
datas,
hidden = false,
}) {
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");
}
const [popUp, setPopUp] = useState(false);
const popUpHandler = () => {
setPopUp((prev) => !prev);
};
// Image
let selectedImage =
datas?.image || require("../../assets/images/banner-job-due.jpg");
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">
<>
<div
className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
className || ""
}`}
key={datas?.uid}
>
<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(${selectedImage}) 0% 0% / cover no-repeat`,
}}
>
<div className="product-two-options flex justify-between mb-5 relative">
<div className="status">
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
Active
</span>
)}
</span> */}
</div>
</div>
{hidden && <div className="flex justify-center"></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 className="details-area mt-12">
{/* title */}
<button onClick={popUpHandler}>
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
{datas?.title}
</h1>
</button>
<div className="flex justify-between">
<div className="flex items-center space-x-2">
<p className="italic text-gray-400">
{getTimeAgo(datas?.added)}
</p>
</div>
<div>
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
>
Send
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{popUp && (
<SuggestTask onClose={popUpHandler} situation={popUp} details={datas} />
)}
</>
);
}