46 lines
1.7 KiB
React
46 lines
1.7 KiB
React
import React, { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function HomeBannerOffersCard(props) {
|
|
const [imageUrl, setImageUrl] = useState("");
|
|
const link_result = "/" + props.itemData.link_path;
|
|
|
|
useEffect(() => {
|
|
let { banner, banner_location } = props?.itemData;
|
|
if (banner_location === "LOCAL") {
|
|
const imagePath = require(`../../assets/images/${banner}`);
|
|
setImageUrl(imagePath);
|
|
} else if (banner_location === "URL") setImageUrl(banner);
|
|
else return null;
|
|
}, []);
|
|
|
|
return (
|
|
<Link
|
|
// to={link_result}
|
|
to={link_result == '/blog-page' ? `${link_result}?blog_id=${props.itemData.blog_id}` : `${link_result}`}
|
|
className="item p-2 w-full flex items-center min-h-[340px] bg-alice-blue bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: `url('${imageUrl}')`,
|
|
}}
|
|
>
|
|
<div className="w-[80%] h-full mx-auto flex flex-col justify-between">
|
|
<div className="content flex justify-between items-center">
|
|
<div className="mb-2">
|
|
<h1 className="text-2xl lg:text-4xl font-bold text-dark-gray dark:text-white tracking-wide">
|
|
<span className="heroSilderTitle">{props.itemData.title}</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col justify-around items-center flex-1">
|
|
<div className="siderCardDescription mb-2">
|
|
{props.itemData.description}
|
|
</div>
|
|
<button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
|
|
{props.itemData.button_text}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|