JSFiddle - React, Tailwind, and code Playground

by brigand

JavaScript

<Card className={location.pathname === '/' || location.pathname.includes('/favorite/') ? classes.full_player : classes.full_image}>
                        {location.pathname !== '/' ? <IconButton className={classes.like} style={{color: location.pathname.includes('/favorite') ? '#7fd268' : 'white'}} onClick={handleLikes} title="Favorite"><FavoriteIcon /></IconButton> : ""}
                        <CardHeader titleTypographyProps={{variant:'h6'}} className={classes.header} title={props.data.title}/>
                        {props.data.media_type === "video" ? <ReactPlayer url={props.data.url} /> : <Link onClick={handleFavClick} to={props.data._id ? `/favorite/${props.data._id}` : ""}> <CardMedia style={{cursor: location.pathname === '/favorites' ? 'pointer' : 'default'}} className={location.pathname === '/' || location.pathname.includes('/favorite/') ? classes.full_media : classes.media} image={props.data.url} alt="img"/> </Link>}
                        <div className={classes.full_text}>{props.data.explanation}</div>
                        {location.pathname.includes('/favorite/') ?
                        <Link to="/favorites" className={classes.back}>
                            <IconButton title="Back to favorites" color="inherit" aria-label="back">
                                <ThreeSixtyIcon />
                            </IconButton>
                        </Link> : ""}
                    </Card>m