text: import React from 'react';
  import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle} from 'reactstrap';
  import {Loading} from './LoadingComponent';
  import {baseUrl} from '../shared/baseURL';
  import {FadeTransform} from 'react-animation-components';
  
  function RenderCard({item, isLoading, errmss, logs}){
  	if (isLoading) {
  		return(
  				<Loading />
  		);
  	}
  	else if (errmss) {
  		return(
  				<h4>{errmss}</h4>
  		);
  	}
  	else{
  		console.log(logs);
  		return(
  			<FadeTransform in transformProps = {{exitTransform: 'scale(0.5) translateY(-50%)'}}>
  			<Card>
  				<CardImg src={baseUrl+item.image} alt={item.name} />
  				<CardBody>
  					<CardTitle>{item.name}</CardTitle>
  					{item.designation ? <CardSubtitle> {item.designation} </CardSubtitle> : null }
  					<CardText>{item.description}</CardText>
  				</CardBody>
  			</Card>
  			</FadeTransform>
  			);
  	}
  }
  
  function Home(props){
  	return(
  			<div className="container">
  				<div className="row align-items-start">
  					<div className="col-12 col-md m-1">
  						<RenderCard item={props.dish} 
  						isLoading={props.dishesLoading}
  						errmss={props.dishesErrMss} logs="dish"
  						/>
  					</div>
  					<div className="col-12 col-md m-1">
  						<RenderCard item={props.promotion} 
  						isLoading={props.promosLoading} 
  						errmss={props.prmoErrmss} logs="promo"
  						/>
  					</div>
  					<div className="col-12 col-md m-1">
  						<RenderCard item={props.leader} 
  						isLoading={props.leaderLoading} 
  						errmss={props.leaderErrMss} logs="leader"
  						/>
  					</div>
  				</div>
  			</div>
  		);
  }
  
  export default Home;