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