|
|
|
|
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:
|
|
|
|
|
"در این قسمت نکات مهم و ضروری برای موکب مورد نظر نوشته می شود و همچنین در مورد موارد مهم دیگر نیز در این قسمت صحبت خواهد شد",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|