You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React from "react"; |
|
|
|
|
|
import logoRectangle from "./images/logo-rectangle.svg"; |
|
|
import map from "./images/map.svg"; |
|
|
import marker from "./images/marker.svg"; |
|
|
import phone from "./images/phone.svg"; |
|
|
|
|
|
const ContactUsInfoCard = ({ items }) => { |
|
|
return ( |
|
|
<div className="max-w-[650px] flex flex-col rounded-md border bg-white border-gray-200 p-4 mx-auto mt-10"> |
|
|
{/* logo && map */} |
|
|
<div className="flex flex-row items-center justify-between "> |
|
|
<img src={map} alt="map" className="flex-1" /> |
|
|
<img src={logoRectangle} alt="map" className="w-[]" /> |
|
|
</div> |
|
|
{/* contact info */} |
|
|
{items.map((item, index) => ( |
|
|
<div className="flex flex-row items-center mt-2" key={index}> |
|
|
{item.icon && <img className="w-5" src={item.icon} alt={item.icon} />} |
|
|
<p |
|
|
className={`text-[#2383E1] text-sm font-sansbold ${ |
|
|
item.icon === null ? "mr-8" : "mr-2" |
|
|
}`} |
|
|
> |
|
|
{item.title} |
|
|
<span className="text-[#0F0543] mr-1 text-sm text-justify leading-6"> |
|
|
{item.content} |
|
|
</span> |
|
|
</p> |
|
|
</div> |
|
|
))} |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default ContactUsInfoCard; |
|
|
|
|
|
ContactUsInfoCard.defaultProps = { |
|
|
items: [ |
|
|
{ |
|
|
icon: marker, |
|
|
title: "نشانی:", |
|
|
content: "شارع دوم شارع حسینی عمود موکب ۲۲", |
|
|
}, |
|
|
{ |
|
|
icon: phone, |
|
|
title: "شماره تلفنی ضروری موکب:", |
|
|
content: "۰۸۶۲۵۴۶۴۸۲۳", |
|
|
}, |
|
|
{ |
|
|
icon: null, |
|
|
title: "تذکرات و نکات مهم:", |
|
|
content: |
|
|
"در این قسمت نکات مهم و ضروری برای موکب مورد نظر نوشته می شود و همچنین در مورد موارد مهم دیگر نیز در این قسمت صحبت خواهد شد", |
|
|
}, |
|
|
], |
|
|
};
|
|
|
|