116 lines
3.8 KiB
React
116 lines
3.8 KiB
React
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
const AccountDashboard = ({ className, bannerList }) => {
|
|
const getUpperBanner = bannerList?.slice(0, 3);
|
|
|
|
let getImage = ({banner_location, banner}) => {
|
|
if (banner_location == "LOCAL") {
|
|
return require(`../../assets/images/${banner}`);
|
|
} else {
|
|
return banner;
|
|
}
|
|
};
|
|
|
|
console.log(getUpperBanner);
|
|
return (
|
|
<div
|
|
className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
<div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
|
|
{getUpperBanner?.map((props, idx) => {
|
|
|
|
let image = getImage(props);
|
|
|
|
let { short_title, short_description, button_text, link_path } =
|
|
props;
|
|
|
|
return (
|
|
<TopBanner
|
|
btn={button_text}
|
|
image={image}
|
|
title={short_title}
|
|
desc={short_description}
|
|
link_path={link_path}
|
|
key={idx}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4 ">
|
|
<LowerBanner />
|
|
<LowerBanner />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AccountDashboard;
|
|
|
|
const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
|
|
return (
|
|
<div className="flex flex-col shadow-md rounded-xl">
|
|
<Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
|
|
<img
|
|
src={image}
|
|
alt="banner-img"
|
|
className="w-full h-full rounded-t-xl object-cover"
|
|
/>
|
|
</Link>
|
|
<div className="h-[7rem] rounded-b-xl bg-white">
|
|
<div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
|
|
<Link to={link_path} className="font-bold text-lg">
|
|
{title}
|
|
</Link>
|
|
<Link to={link_path} className="text-sm">
|
|
{desc}
|
|
</Link>
|
|
</div>
|
|
<div className="flex justify-between w-full px-2 items-center">
|
|
<Link to={link_path} className="text-slate-300 font-semibold">
|
|
{btn}
|
|
</Link>
|
|
<button className="flex items-center justify-center gap-2">
|
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
|
|
let Image = require(`../../assets/images/offer.jpg`);
|
|
return (
|
|
<div className="flex flex-col bg-white shadow-md h-full rounded-xl">
|
|
<div className="w-full flex justify-between border-b border-slate-300 p-2">
|
|
<div className="h-[130px] flex justify-between items-center">
|
|
<div className="px-2">
|
|
<h3 className="text-lg font-bold">Banner Title</h3>
|
|
<p className="text-sm">Banner description text will come follow</p>
|
|
</div>
|
|
</div>
|
|
<div className="w-[150px] h-[100px]">
|
|
<img
|
|
src={Image}
|
|
alt="banner-img"
|
|
className="w-full h-full rounded-xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between w-full px-2 items-center">
|
|
<span className="text-slate-300 font-semibold">follow up text</span>
|
|
<button className="flex items-center justify-center gap-2">
|
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|