DESKTOP-GBA0BK8\Admin
104 lines
3.7 KiB
React
104 lines
3.7 KiB
React
import React, { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { toast } from "react-toastify";
|
|
import heroBg from "../../assets/images/hero-bg.svg";
|
|
import heroUser from "../../assets/images/hero-user.png";
|
|
import slider1 from "../../assets/images/slider-1.jpg";
|
|
import slider2 from "../../assets/images/slider-2.jpg";
|
|
import slider3 from "../../assets/images/slider-3.jpg";
|
|
import CountDown from "../Helpers/CountDown";
|
|
import SliderCom from "../Helpers/SliderCom";
|
|
import HomeSliders from "./HomeSliders";
|
|
|
|
export default function Hero({ className }) {
|
|
const settings = {
|
|
autoplay: true,
|
|
dots: true,
|
|
arrows: false,
|
|
infinite: true,
|
|
swipe: true,
|
|
};
|
|
const sildeData =null;
|
|
const [addFavorite, setValue] = 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={`w-full lg:h-[444px] h-full lg:flex lg:p-8 p-4 justify-between items-center lg:space-x-28 rounded-2xl overflow-hidden ${
|
|
className || ""
|
|
}`}
|
|
style={{
|
|
background: `url(${heroBg})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "cover",
|
|
}}
|
|
>
|
|
<div className="flex-1 h-[330px] lg: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 : 10-10-2026
|
|
</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={heroUser} alt="" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
|
Brokln Simons
|
|
</p>
|
|
<p className="text-sm tracking-wide text-white">@broklinslam_75</p>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* action */}
|
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
|
<Link
|
|
to="/market-place"
|
|
className="text-white text-base sm:block hidden"
|
|
>
|
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
|
{" "}
|
|
View All Task(s)
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<HomeSliders settings={settings} sideData={sildeData}/>
|
|
</div>
|
|
);
|
|
}
|