import React from "react"; import "./ContactInfoSection.scss"; import ReactTooltip from "react-tooltip"; import customerSupport from "../../assets/icons/customer-support.png"; import lightGreenLine from "../../assets/icons/light-green-line.svg"; import lightBlueLine from "../../assets/icons/light-blue-line.svg"; const ContactInfoSection = ({ contactInfoSectionBgColor, dayNumTextColor, contentTextColor, }) => { return ( <section className={`relative flex flex-col sm:flex-row items-center justify-center p-4 ${contactInfoSectionBgColor}`} > {/* line */} <img src={lightBlueLine} alt="" className="hidden sm:block absolute right-72" /> {/* middle content */} <img src={customerSupport} alt="" data-tip="صفحه تماس با ما" className="w-20 cursor-pointer customer-support" /> <ReactTooltip place="bottom" type="dark" effect="float" /> <p className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`} > <span className={`${dayNumTextColor}`}>7 </span> روز هفته <span className={`${dayNumTextColor}`}> 24 </span> ساعته <br /> منتظر شنیدن صدای گرمتان هستیم </p> <div className="flex flex-col mr-0 sm:mr-10 mt-5 sm:mt-0"> <a href="tel:021654412" className={`text-sm ${contentTextColor}`}> 021654412 </a> <a href="mailto:webmaster@example.com" className={`text-sm ${contentTextColor}`} > info@danovin.ir </a> </div> {/* line */} <img src={lightGreenLine} alt="" className="hidden sm:block absolute left-72" /> </section> ); }; export default ContactInfoSection; ContactInfoSection.defaultProps = { contactInfoSectionBgColor: "bg-midGrayBgColor", dayNumTextColor: "text-lightBlueTextColor2", contentTextColor: "text-darkCrimsonTextColor", };