Styled Components example

Styled Components example

import styled from 'styled-components';

// Styles that Wrapper will apply to it's children
// This can be exported and used in different files
export const VendorCardWrapper = styled.div`
  display: flex;
  .card-text {
    color: white;
    width: 50%;
    padding: 60px 35px;
    background-color: #003643;
  }
  .section-title {
    ...
  }
  .card-image {
    width: 50%;
    img {
      width: 100%;
    }
  }
`;

const VendorCard = ({ data }) => {
  const imgSrc = data.images.filter(img => img.position === 1);
  const list = data.tags.slice(0, 3);
  return (
    // You wrap your code in this parent component, that carries the styles above
    <VendorCardWrapper>
      <div className="card-text">
        <div className="section-title">
          Focus on balance</span>
        </div>
        <div className="section-subtitle">
          {data.descriptionShort}
        </div>
        <ul>
          {list.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      </div>
      <div className="card-image">
        <img src={imgSrc[0].secureUrl} alt="Atcha Food" />
      </div>
    </VendorCardWrapper>
  );
};