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 && (
+
+ )}
+ {schedule && schedule.day_of_week && (
+
+
График работы
+
{formatSchedule(schedule.day_of_week)}
+
+ )}
+ {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 (
+
+ );
+}
+
+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;