accommodation-detail-rebase-jsx

import React, { Component } from 'react';
import './AcommodationDetail.css';
import Banner from '../Banner/Banner';

class AcommodationDetail extends Component {
    constructor(props){
        super(props);
        this.state = {
            style:{
                width: '70%',
                height: '100vh',
                display: 'none',
            },
            accommodations: [
                {
                    title: 'BUNGALOW',
                    subtitle: 'FAMÍLIA',
                    description: 'Nosso bungalow família tem 80 m2 distribuídos em 03 quartos (com ar condicionado split), sendo 01 térreo e 02 no 1 piso.',
                    services:[
                        {
                            icon: require('./wifi.svg'),
                            text: 'wifi',
                        },
                        {
                            icon: require('./breakfast.svg'),
                            text: 'cafe-da-manha',
                        },
                    ]
                }
            ]
         }
    }

    render() {
        return (
            <section className="accommodation-detail">
                <div className="accommodation-detail-informations">
                    <div className="accommodation-detail-container">
                        <div className="accommodation-detail-title-box">
                            <div className="accommodation-detail-title">{this.state.accommodations[0].title}</div>
                            <div className="accommodation-detail-subtitle">{this.state.accommodations[0].subtitle}</div>
                        </div>
                        <div className="accommodation-detail-description">{this.state.accommodations[0].description}</div>
                        <div className="accommodation-detail-offered-services">
                            {this.state.accommodations[0].services.map(service =>
                                <div className="services-box">
                                    <img className="services-icon" src={service.icon}></img>
                                    <div className="service-description">{service.text}</div>
                                </div>
                            )}

                        </div>
                        <div className="see-more-informations">
                            <span className="see-more-informations-text">Ver mais</span>
                            <span className="see-more-informations-underline"></span>
                        </div>
                    </div>
                </div>
                <Banner newStyle={this.state.style}/>
            </section>
         );
    }
}

export default AcommodationDetail;