parent
7a02eae7ed
commit
ace95b2b09
9 changed files with 179 additions and 126 deletions
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,125 @@ |
||||
import React from "react"; |
||||
import Tag from "../Tag"; |
||||
|
||||
import crown from "./crown-icon.svg"; |
||||
import box from "./box.svg"; |
||||
import cake from "./cake.svg"; |
||||
import colorPalette from "./color-palette.svg"; |
||||
import hat from "./hat.svg"; |
||||
import plane from "./plane.svg"; |
||||
|
||||
const Features = ({ functionalities }) => { |
||||
return ( |
||||
<section className="bg-white border-2 border-gray-400 rounded m-7"> |
||||
{/* top */} |
||||
<h2 className="text-lg font-bold text-productTitle mr-7 my-5"> |
||||
امکانات و ویژگی ها |
||||
</h2> |
||||
<div className="w-full flex flex-wrap justify-around items-center"> |
||||
{functionalities.map((feature, index) => ( |
||||
<div className="flex flex-row w-2/5 p-5" key={index}> |
||||
{/* 1 */} |
||||
<div |
||||
className="rounded p-2 ml-5" |
||||
style={{ |
||||
backgroundColor: feature.iconBgColor, |
||||
}} |
||||
> |
||||
<img src={feature.icon} alt="" className="w-10 h-10" /> |
||||
</div> |
||||
{/* 2 */} |
||||
<div className="flex flex-col"> |
||||
<div className="flex items-center"> |
||||
<p className={`text-base`}>{feature.title}</p> |
||||
<span |
||||
className={`mr-4 text-sm px-2 py-1 rounded-lg bg-blue-100`} |
||||
> |
||||
{feature.status} |
||||
</span> |
||||
</div> |
||||
<p className="mt-1 text-justify text-sm leading-6"> |
||||
{feature.content} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
{/* footer */} |
||||
<div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-rangeBgColor "> |
||||
<div> |
||||
<h2 className="font-semibold text-base text-productTitle"> |
||||
هزاران درصد تحفیف |
||||
</h2> |
||||
<p className="mt-4 text-sm text-productTitle"> |
||||
با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار |
||||
شوید |
||||
</p> |
||||
</div> |
||||
<button |
||||
className="px-7 py-3 text-sm sm:text-base mt-5 sm:mt-0 rounded-md text-blue-600 hover:text-white |
||||
bg-white |
||||
hover:bg-blue-600 |
||||
border-2 |
||||
border-blue-600" |
||||
> |
||||
مشاهده امکانات |
||||
</button> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Features; |
||||
|
||||
Features.defaultProps = { |
||||
functionalities: [ |
||||
{ |
||||
icon: crown, |
||||
iconBgColor: "#FFFDC4", |
||||
title: "قابلیت امتیاز دهی", |
||||
status: "جدید", |
||||
content: |
||||
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
||||
}, |
||||
{ |
||||
icon: box, |
||||
iconBgColor: "#CEC4FF", |
||||
title: "قابلیت انتخاب رنگ دلخواه", |
||||
status: "جدید", |
||||
content: |
||||
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
||||
}, |
||||
{ |
||||
icon: cake, |
||||
iconBgColor: "#C4FFF7", |
||||
title: "یادآوری جشن تولد", |
||||
status: "جدید", |
||||
content: |
||||
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
||||
}, |
||||
{ |
||||
icon: colorPalette, |
||||
iconBgColor: "#FFC4EB", |
||||
title: "انتخاب سطح و پایه تحصیلی", |
||||
status: "جدید", |
||||
content: |
||||
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
||||
}, |
||||
{ |
||||
icon: hat, |
||||
iconBgColor: "#C4FFE2", |
||||
title: "حالت پرواز", |
||||
status: "جدید", |
||||
content: |
||||
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
||||
}, |
||||
{ |
||||
icon: plane, |
||||
iconBgColor: "#E5FFC4", |
||||
title: "نحوه ارسال جعبه خاطرات", |
||||
status: "جدید", |
||||
content: |
||||
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
||||
}, |
||||
], |
||||
}; |
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,124 +0,0 @@ |
||||
import React from "react"; |
||||
import Tag from "../Tag"; |
||||
|
||||
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, |
||||
productTags, |
||||
}) => { |
||||
return ( |
||||
<section> |
||||
<div className="w-11/12 mx-auto mt-7 bg-white p-7 shadow-sm border-2 border-gray-400 border-b-0 rounded-lg rounded-b-none"> |
||||
<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> |
||||
{/* {productTags.map((item, index) => ( |
||||
<Tag title={item} key={index} /> |
||||
))} */} |
||||
</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 flex-col sm:flex-row items-center justify-between border-2 border-gray-400 border-t-0 rounded-lg rounded-t-none"> |
||||
<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-sm sm:text-base mt-5 sm:mt-0 rounded-md hover:${buttonTitleHoverBgColor} ${buttonTitleTextColor} ${buttonTitleBgColor} ${buttonTitleBorder} ${buttonTitleBorderColor}`} |
||||
> |
||||
{buttonTitle} |
||||
</button> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Functionality; |
||||
|
||||
Functionality.defaultProps = { |
||||
componentTitle: "امکانات و ویژگی های پلتفرم", |
||||
functionalityTitle: "قابلیت امتیاز دهی", |
||||
functionalityTag: "جدید", |
||||
// productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
|
||||
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-50", |
||||
|
||||
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