victorAnumudu
103 lines
3.9 KiB
React
103 lines
3.9 KiB
React
import React, { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { toast } from "react-toastify";
|
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
|
import heroUser from "../../assets/images/hero-user.png";
|
|
import CountDown from "../Helpers/CountDown";
|
|
import HomeSliders from "./HomeSliders";
|
|
import { useSelector } from "react-redux";
|
|
|
|
export default function Hero({ className, bannerList, nextDueTask }) {
|
|
const settings = {
|
|
autoplay: true,
|
|
dots: true,
|
|
arrows: false,
|
|
infinite: true,
|
|
swipe: true,
|
|
};
|
|
const sildeData = null;
|
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
|
|
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
|
let userEmail = email.split("@")[0];
|
|
|
|
return (
|
|
<div
|
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden ${
|
|
className || ""
|
|
}`}
|
|
style={{
|
|
background: `url(${heroBg})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "cover",
|
|
}}
|
|
>
|
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
|
{/* heading */}
|
|
<div>
|
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
|
Welcome
|
|
</h1>
|
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
|
Last Login : {loginDate}
|
|
</span>
|
|
</div>
|
|
{/* user */}
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
|
{`${firstname} ${lastname}`}
|
|
</p>
|
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
|
</div>
|
|
</div>
|
|
{/* countdown */}
|
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 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).substr(0,4)+'...'}
|
|
</p>
|
|
<p className="text-base text-white tracking-wide">
|
|
{nextDueTask.next_due.price * 0.01} 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>
|
|
)}
|
|
{/* action */}
|
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
|
<Link to="/mytask" className="text-white text-base">
|
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
|
{" "}
|
|
View All Task(s)
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<HomeSliders
|
|
settings={settings}
|
|
sideData={sildeData}
|
|
bannerList={bannerList}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|