{"size": 2986, "ext": "js", "max_stars_repo_path": "src/CardView.js", "max_stars_repo_name": "satishvj/rec", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/CardView.js", "max_issues_repo_name": "satishvj/rec", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/CardView.js", "max_forks_repo_name": "satishvj/rec", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 36.4146341463, "max_line_length": 120, "alphanum_fraction": 0.3858004019}
import React, { useEffect } from "react";
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import { useHistory } from "react-router-dom";

import {
    Icon,
    IconButton,
    Grid,
    CardActions,
    Tooltip,
    Button
  } from '@material-ui/core';

  
const useStyles = makeStyles((theme) => ({
   
    media: {
      height: 200,
    }, 
    card:{
        height: 400,
        margin: '5%'
    }
  }));
export default function CardView(props) {
    const classes = useStyles();
    let history = useHistory()

    function buy(data) {
        console.log(data)
        history.push("/pay");
    }


    return (
        <div>
            <Card className={classes.card}>
              
                {props.data !== null && (
                    <>
                        <CardContent className='w-full' >
                            <div>
                                <div xs={12} sm={12} md={12} lg={12} className='relative flex flex-col'>
                                    {/* <div className='flex w-full justify-between'> */}
                                    <div className='flex justify-between'>
                                        <div className='flex ml-8 overflow-hidden'>
                                            <div className='overflow-hidden'>
                                                <Typography className='font-bold mb-8 mt-4 Text-ellipsis' gutterBottom>
                                                    {props.data.name}
                                                </Typography>
                                                {/* <CardMedia
        className={classes.media}
        image={props.data.image}
        title="Paella dish"
      /> */}
      <img src={props.data.image} className={classes.media}/>
                                                <Typography className='subText14 Text-ellipsis' gutterBottom>
                                                    {props.data && props.data.description}
                                                </Typography>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <CardActions>
                                <div className="lastOpened-lbl">
                                    <Button variant="contained" color="primary" onClick={() => { buy(props.data) }}>
                                        Buy {`$` + props.data.price}
                    </Button>
                                </div>
                            </CardActions>
                        </CardContent>

                    </>)}
</Card>
    </div>
    )
}