|
|
|
import React, { Component } from "react";
|
|
|
|
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
|
|
|
|
|
|
|
|
import "./index.scss";
|
|
|
|
|
|
|
|
const maxDesktopSize = 1250;
|
|
|
|
|
|
|
|
const fontSize = {
|
|
|
|
desktop: {
|
|
|
|
h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
export default class HomeStatic extends Component {
|
|
|
|
render() {
|
|
|
|
const { data, height, title } = this.props;
|
|
|
|
return (
|
|
|
|
<section
|
|
|
|
className={
|
|
|
|
title ? "home-static d-flex flex-column" : "home-static d-flex"
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{title ? (
|
|
|
|
<div className="home-scroll__header d-flex">
|
|
|
|
<h1>{title}</h1>
|
|
|
|
<div className="home-scroll__header--more d-flex">
|
|
|
|
<span>موارد بیشتر</span>
|
|
|
|
<ChevronLeftIcon
|
|
|
|
style={{
|
|
|
|
width: 20,
|
|
|
|
height: 20,
|
|
|
|
color: "black",
|
|
|
|
marginRight: 1,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
<div className="home-static__list d-flex">
|
|
|
|
{data.map((item, i) => (
|
|
|
|
<Item data={item} height={height} key={i} />
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Item = (props) => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{window.innerWidth > 1000 ? (
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
width: `${props.data.width}%`,
|
|
|
|
height: props.height,
|
|
|
|
}}
|
|
|
|
className="home-static__list--item d-flex"
|
|
|
|
>
|
|
|
|
<div className="d-flex flex-column">
|
|
|
|
<h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>{props.data.topText}</h2>
|
|
|
|
<h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>{props.data.bottomText}</h2>
|
|
|
|
</div>
|
|
|
|
<img src={props.data.image} alt="عکس" />
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
{
|
|
|
|
window.innerWidth < 1000 ? (
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
width: `${props.data.width}%`,
|
|
|
|
}}
|
|
|
|
className="home-static__list--item d-flex p-2 mobile-static"
|
|
|
|
>
|
|
|
|
<div className="d-flex flex-column">
|
|
|
|
<h1 style={{ color: "#02733c" }}>{props.data.topText}</h1>
|
|
|
|
<h2 style={{ color: "#7dc241" }}>{props.data.bottomText}</h2>
|
|
|
|
</div>
|
|
|
|
<img src={props.data.image} alt="عکس" />
|
|
|
|
</div>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|