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