parent
3a80979492
commit
a612ab9299
4 changed files with 142 additions and 16 deletions
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,118 @@ |
||||
import React from "react"; |
||||
|
||||
import crown from "../../assets/icons/crown-icon.svg"; |
||||
|
||||
const Functionality = ({ |
||||
componentTitle, |
||||
componentTitleTextColor, |
||||
functionalityTitle, |
||||
functionalityTitleTextColor, |
||||
functionalityTag, |
||||
functionalityTagTextColor, |
||||
functionalityTagBgColor, |
||||
functionalityExcerptTextColor, |
||||
containerBgColor, |
||||
functionalityIconPadding, |
||||
functionalityIconBgColor, |
||||
functionalityIconAlignment, |
||||
footerTitle, |
||||
footerExplanation, |
||||
buttonTitle, |
||||
footerTitleTextColor, |
||||
footerExplanationTextColor, |
||||
buttonTitleTextColor, |
||||
buttonTitleBgColor, |
||||
buttonTitleBorder, |
||||
buttonTitleBorderColor, |
||||
buttonTitleHoverBgColor, |
||||
}) => { |
||||
return ( |
||||
<section> |
||||
<div className="w-11/12 mx-auto mt-7 bg-white p-7 shadow-sm"> |
||||
<h2 className={`text-lg font-bold ${componentTitleTextColor}`}> |
||||
{componentTitle} |
||||
</h2> |
||||
<div className="flex justify-around items-center my-4"> |
||||
<div |
||||
className={`flex flex-col sm:flex-row ${functionalityIconAlignment} justify-between p-7 rounded shadow-sm ${containerBgColor}`} |
||||
> |
||||
<div |
||||
className={`rounded ${functionalityIconPadding} ${functionalityIconBgColor}`} |
||||
> |
||||
<img src={crown} alt="" className="w-10 h-10" /> |
||||
</div> |
||||
<div className="mt-4 sm:mt-0 mr-4 flex flex-col"> |
||||
<div className="flex items-center"> |
||||
<p className={`text-base ${functionalityTitleTextColor}`}> |
||||
{functionalityTitle} |
||||
</p> |
||||
<span |
||||
className={`mr-4 text-sm px-2 py-1 rounded-lg ${functionalityTagTextColor} ${functionalityTagBgColor}`} |
||||
> |
||||
{functionalityTag} |
||||
</span> |
||||
</div> |
||||
<p |
||||
className={`mt-2 text-justify text-sm leading-7 ${functionalityExcerptTextColor}`} |
||||
> |
||||
قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا |
||||
به جامعه هدف کارکنان کمک نمایید. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="w-11/12 mx-auto bg-rangeBgColor p-10 flex items-center justify-between"> |
||||
<div> |
||||
<h2 className={`font-semibold text-base ${footerTitleTextColor}`}> |
||||
{footerTitle} |
||||
</h2> |
||||
<p className={`mt-4 text-sm ${footerExplanationTextColor}`}> |
||||
{footerExplanation} |
||||
</p> |
||||
</div> |
||||
<button |
||||
className={`px-7 py-3 text-base rounded-md hover:${buttonTitleHoverBgColor} ${buttonTitleTextColor} ${buttonTitleBgColor} ${buttonTitleBorder} ${buttonTitleBorderColor}`} |
||||
> |
||||
{buttonTitle} |
||||
</button> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Functionality; |
||||
|
||||
Functionality.defaultProps = { |
||||
componentTitle: "امکانات و ویژگی های پلتفرم", |
||||
functionalityTitle: "قابلیت امتیاز دهی", |
||||
functionalityTag: "جدید", |
||||
functionalityExcerpt: "جدید", |
||||
footerTitle: "هزاران درصد تحفیف", |
||||
footerExplanation: |
||||
"با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار شوید", |
||||
buttonTitle: "مشاهده امکانات", |
||||
|
||||
componentTitleTextColor: "text-productPrice", |
||||
functionalityTitleTextColor: "text-lightBlueTextColor", |
||||
functionalityTagTextColor: "text-productTitle", |
||||
functionalityTagBgColor: "bg-lightBlueBookBg", |
||||
functionalityExcerptTextColor: "text-grayTextColor", |
||||
containerBgColor: "bg-likeBtnBg", |
||||
|
||||
functionalityIconPadding: "p-5", |
||||
functionalityIconBgColor: "bg-yellow-100", |
||||
|
||||
footerTitleTextColor: "text-productTitle", |
||||
footerExplanationTextColor: "text-productTitle", |
||||
buttonTitleTextColor: "text-lightBlueTextColor", |
||||
buttonTitleBgColor: "bg-white", |
||||
buttonTitleHoverBgColor: "bg-blueBgColor", |
||||
buttonTitleBorder: "border-2", |
||||
buttonTitleBorderColor: "border-lightBlueBorderColor", |
||||
|
||||
// برای زمانی که ایکن سمت راست بک گراند نداره و میخواهیم که از بالا با تایتل سمت چپ شروع شود و نه از وسط
|
||||
// items-start
|
||||
// items-center
|
||||
functionalityIconAlignment: "items-start", |
||||
}; |
||||
Loading…
Reference in new issue