Reza_ashrafi
3 years ago
parent
258ac4bcf8
commit
ec4e0312ed
9 changed files with 194 additions and 1 deletions
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,125 @@ |
||||
import React from "react"; |
||||
|
||||
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 = ({ features }) => { |
||||
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"> |
||||
{features.map((feature, index) => ( |
||||
<div className="flex flex-row w-2/5 p-5" key={index}> |
||||
{/* 1 */} |
||||
<div |
||||
className="rounded p-2 ml-5 flex items-center" |
||||
style={{ |
||||
backgroundColor: feature.iconBgColor, |
||||
height: "fit-content", |
||||
}} |
||||
> |
||||
<img src={feature.icon} alt="" className="w-10 h-10" /> |
||||
</div> |
||||
{/* 2 */} |
||||
<div className="flex flex-col"> |
||||
<div className="flex items-center"> |
||||
<strong className={`text-base font-medium`}>{feature.title}</strong> |
||||
<span |
||||
className={`mr-4 text-xs 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-blue-100 "> |
||||
<div> |
||||
<h2 className="font-semibold text-base"> |
||||
هزاران درصد تحفیف |
||||
</h2> |
||||
<p className="mt-4 text-sm"> |
||||
با وارد کردن کد بهار نگو تابستون از تخفیف 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 cursor-pointer" |
||||
> |
||||
مشاهده امکانات |
||||
</button> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Features; |
||||
|
||||
Features.defaultProps = { |
||||
features: [ |
||||
{ |
||||
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 |
Loading…
Reference in new issue