You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.7 KiB
51 lines
1.7 KiB
import React, { Component } from 'react'; |
|
import {Link} from 'react-router-dom'; |
|
|
|
import './index.scss'; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 65, |
|
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85, |
|
notAvailable: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
|
available: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
|
}, |
|
}; |
|
|
|
export default class Simple extends Component { |
|
render() { |
|
const { height, data } = this.props; |
|
return( |
|
<article className="slider-simple d-flex flex-column" |
|
style={{ |
|
height: height, |
|
}}> |
|
<Link to={`/books/${data.id}`}> |
|
<img src={data.image} alt={data.title} /> |
|
<h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1> |
|
<h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2> |
|
{ |
|
data.price ? |
|
<div className="slider-simple__price d-flex justify-content-center"> |
|
{ |
|
data.oldPrice ? |
|
<div> |
|
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--old d-flex"> |
|
{data.oldPrice} تومان |
|
<span></span> |
|
</div> |
|
|
|
</div> : null |
|
} |
|
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div> |
|
</div> : |
|
<div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div> |
|
} |
|
</Link> |
|
</article> |
|
|
|
); |
|
} |
|
} |