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.

58 lines
1.8 KiB

3 years ago
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 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" />
<img src={logoRectangle} alt="map" />
</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 ${
item.icon === null ? "mr-8" : "mr-2"
}`}
>
{item.title}
<span className="text-[#0F0543] mr-1 text-sm not-italic text-justify leading-6">
{item.content}
</span>
</p>
</div>
))}
</div>
);
3 years ago
};
export default ContactUsInfoCard;
ContactUsInfoCard.defaultProps = {
items: [
{
icon: marker,
title: "نشانی:",
content: "شارع دوم شارع حسینی عمود موکب ۲۲",
},
{
icon: phone,
title: "شماره تلفنی ضروری موکب:",
content: "۰۸۶۲۵۴۶۴۸۲۳",
},
{
icon: null,
title: "تذکرات و نکات مهم:",
content:
"در این قسمت نکات مهم و ضروری برای موکب مورد نظر نوشته می شود و همچنین در مورد موارد مهم دیگر نیز در این قسمت صحبت خواهد شد",
},
],
};