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

user currect task due time implementation

Browse Source
This commit was merged in pull request #140.
This commit is contained in:
victorAnumudu
2023-06-05 19:24:54 +01:00
parent 36ee1e8987
commit 8a81e6da54
4 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home/Hero.jsx
+26 -21
View File
@@ -11,7 +11,7 @@ import SliderCom from "../Helpers/SliderCom";
import HomeSliders from "./HomeSliders";
import { useSelector } from "react-redux";
export default function Hero({ className,bannerList }) {
export default function Hero({ className, bannerList, nextDueTask }) {
const settings = {
autoplay: true,
dots: true,
@@ -71,27 +71,32 @@ export default function Hero({ className,bannerList }) {
</div>
</div>
{/* countdown */}
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
<div className="flex flex-col justify-between">
<p className="text-base text-white tracking-wide">Current Task</p>
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
ABCDEFGH01
</p>
<p className="text-base text-white tracking-wide">773.69 USD</p>
</div>
<div className="w-[1px] h-full bg-white-opacity"></div>
<div className="flex flex-col justify-between">
<p className="text-base text-white tracking-wide">Next due in</p>
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
<CountDown lastDate="2023-04-26 4:00:00" />
</p>
<div className="text-base text-white tracking-wide flex gap-[23px]">
<span>Hrs</span>
<span>Min</span>
<span>Sec</span>
{ nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length &&
(
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
<div className="flex flex-col justify-between">
<p className="text-base text-white tracking-wide">Current Task</p>
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
{nextDueTask.next_due.item_code}
</p>
<p className="text-base text-white tracking-wide">{nextDueTask.next_due.price} Naira</p>
</div>
<div className="w-[1px] h-full bg-white-opacity"></div>
<div className="flex flex-col justify-between">
<p className="text-base text-white tracking-wide">Next due in</p>
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
<CountDown lastDate={nextDueTask.next_due.due_date} />
</p>
<div className="text-base text-white tracking-wide flex gap-[23px]">
<span>Hrs</span>
<span>Min</span>
<span>Sec</span>
</div>
</div>
</div>
</div>
</div>
)
}
{/* action */}
<div className="flex lg:space-x-3 space-x-1 items-center">
<Link