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

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
}
</>
);
}
}