other-services-carousel-card.jsx

import React, { Component } from 'react';
import './OtherServicesCarouselCard.css';
import { Link } from 'react-router-dom';
import apiUrl from '../../api_url';

class OtherServicesCarouselCard extends Component {
  state = {  }
  render() {
    return (
      <div
        className="other-services-carousel-card"
        id={`other-service-carousel-card-${ this.props.identifier }`}
        style={{
          background: `url(${ apiUrl + this.props.card.imagem.url})`,
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          marginRight: this.props.style.marginRight ? this.props.style.marginRight : 0,
          opacity: 0
        }}
      >
        <Link to={ this.props.url }>
          <p className="other-services-carousel-card-text">{ this.props.card[`texto_${this.props.language}`] }</p>
          <div className="other-services-carousel-card-line"></div>
        </Link>
        <div className="card-width"></div>
      </div>
    );
  }
}

export default OtherServicesCarouselCard;