diff --git a/src/components/CarWashContacts/CarWashContacts.jsx b/src/components/CarWashContacts/CarWashContacts.jsx new file mode 100644 index 0000000..e958ac5 --- /dev/null +++ b/src/components/CarWashContacts/CarWashContacts.jsx @@ -0,0 +1,58 @@ +import PropTypes from 'prop-types'; +import styles from './CarWashContacts.module.css'; +import formatSchedule from '../../utils/formatSchedule'; +import formatLink from '../../utils/formatLink'; +import PhoneIcon from '../UI/icons/PhoneIcon'; +import WebsiteIcon from '../UI/icons/WebsiteIcon'; + +function CarWashContacts({ contacts, schedule }) { + return ( +
+ {contacts.phone && ( +
+

Контакты

+ +

+ + {contacts.phone} + +

+
+ )} + {schedule && schedule.day_of_week && ( +
+

График работы

+

{formatSchedule(schedule.day_of_week)}

+
+ )} + {contacts.website && ( +
+

Сайт

+ +

+ + {formatLink(contacts.website)} + +

+
+ )} +
+ ); +} + +CarWashContacts.propTypes = { + contacts: PropTypes.shape({ + address: PropTypes.string.isRequired, + email: PropTypes.string, + phone: PropTypes.string, + website: PropTypes.string, + }).isRequired, + schedule: PropTypes.shape({ + day_of_week: PropTypes.arrayOf(PropTypes.string), + opening_time: PropTypes.string, + closing_time: PropTypes.string, + open_until_list: PropTypes.string, + }), +}; + +export default CarWashContacts; diff --git a/src/components/CarWashContacts/CarWashContacts.module.css b/src/components/CarWashContacts/CarWashContacts.module.css new file mode 100644 index 0000000..1a2b88b --- /dev/null +++ b/src/components/CarWashContacts/CarWashContacts.module.css @@ -0,0 +1,44 @@ +.container { + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; + height: fit-content; + padding: 32px 24px; + gap: 24px; + border-radius: 20px; + background: #fff; +} + +.info { + display: flex; + align-items: center; +} + +.header { + color: rgb(37, 37, 37); + font-family: Roboto; + font-size: 20px; + font-weight: 500; + line-height: 23px; + width: 174px; + margin: 0; +} + +.text { + color: rgb(37, 37, 37); + font-family: Roboto; + font-size: 18px; + font-weight: 400; + line-height: 21px; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 250px; +} + +.link { + margin-left: 4px; + color: rgb(85, 104, 208); +} diff --git a/src/components/UI/icons/PhoneIcon.js b/src/components/UI/icons/PhoneIcon.js new file mode 100644 index 0000000..021e1c6 --- /dev/null +++ b/src/components/UI/icons/PhoneIcon.js @@ -0,0 +1,48 @@ +import PropTypes from 'prop-types'; + +function PhoneIcon({ width, height }) { + return ( + + + + + + + + + + + + ); +} + +PhoneIcon.propTypes = { + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), +}; + +export default PhoneIcon; diff --git a/src/components/UI/icons/WebsiteIcon.js b/src/components/UI/icons/WebsiteIcon.js new file mode 100644 index 0000000..9f77c56 --- /dev/null +++ b/src/components/UI/icons/WebsiteIcon.js @@ -0,0 +1,30 @@ +import PropTypes from 'prop-types'; + +function PhoneIcon({ width, height }) { + return ( + + Created with Pixso. + + + + ); +} + +PhoneIcon.propTypes = { + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), +}; + +export default PhoneIcon; diff --git a/src/pages/CarWashPage/CarWashPage.jsx b/src/pages/CarWashPage/CarWashPage.jsx index da3b05f..b5bdbfa 100644 --- a/src/pages/CarWashPage/CarWashPage.jsx +++ b/src/pages/CarWashPage/CarWashPage.jsx @@ -9,7 +9,7 @@ import HeaderCarWash from '../../components/HeaderCarWash/HeaderCarWash'; import Price from '../../components/Price/Price'; import TheAdvancedSection from '../../components/TheAdvancedSection/TheAdvancedSection'; import AddressCarWash from '../../components/AddressCarWash/AddressCarWash'; - +import CarWashContacts from '../../components/CarWashContacts/CarWashContacts'; import styles from './CarWashPage.module.css'; function CarWashPage() { @@ -44,6 +44,14 @@ function CarWashPage() { />
+ {carWashesCard.contacts && + (carWashesCard.contacts.phone || + carWashesCard.contacts.website) && ( + + )} {carWashesCard.contacts && ( weekDays.indexOf(day)) + .sort((a, b) => a - b); + const firstDay = formatedWeekDays[sortedDays[0]]; + const lastDay = formatedWeekDays[sortedDays[sortedDays.length - 1]]; + return `${firstDay}-${lastDay}`; +} + +export default formatSchedule;