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