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.
74 lines
2.9 KiB
74 lines
2.9 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 ? 20 : window.innerWidth / 80, |
|
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, |
|
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110, |
|
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90, |
|
} |
|
} |
|
export default class Simple extends Component { |
|
render() { |
|
const { height, data } = this.props; |
|
return( |
|
<> |
|
{ |
|
window.innerWidth > 1000 ? |
|
<article className="slider-blog d-flex flex-column" |
|
style={{ |
|
height: height, |
|
}}> |
|
<div> |
|
<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> |
|
<div className="slider-blog__footer d-flex mt-3"> |
|
<div className="d-flex"> |
|
{/* <img src={} /> */} |
|
<div className="d-flex flex-column"> |
|
<span style={{ fontSize: fontSize.desktop.span }}>مطالعه کامل در {data.duration}</span> |
|
<span style={{ fontSize: fontSize.desktop.span }}>تاریخ انتشار {data.data}</span> |
|
</div> |
|
</div> |
|
<Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>{data.buttonText}</Link> |
|
</div> |
|
<span className="slider-blog__category" style={{backgroundColor: data.category.color, fontSize: fontSize.desktop.span}}>{data.category.name}</span> |
|
</div> |
|
</article> : null |
|
} |
|
{ |
|
window.innerWidth < 1000 ? |
|
<article className="mobile-slider-blog d-flex flex-column" |
|
style={{ |
|
height: height, |
|
}}> |
|
<div> |
|
<img src={data.image} alt={data.title} /> |
|
<h1>{data.title}</h1> |
|
<h2>{data.subTitle}</h2> |
|
<div className="mobile-slider-blog__footer d-flex mt-3"> |
|
<div className="d-flex"> |
|
{/* <img src={} /> */} |
|
<div className="d-flex flex-column"> |
|
<span>مطالعه کامل در {data.duration}</span> |
|
<span>تاریخ انتشار {data.data}</span> |
|
</div> |
|
</div> |
|
<Link to={data.link}>{data.buttonText}</Link> |
|
</div> |
|
<span className="mobile-slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span> |
|
</div> |
|
</article> : null |
|
} |
|
</> |
|
|
|
|
|
); |
|
} |
|
} |