|
|
|
import React, { Component } from "react";
|
|
|
|
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
|
|
|
|
import Identifier from "./Identifier/index";
|
|
|
|
import proxy from "~/Redux/proxy";
|
|
|
|
import "./index.scss";
|
|
|
|
const status = proxy.status();
|
|
|
|
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, designType } = this.props;
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{window.innerWidth > 1000 ? (
|
|
|
|
<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>
|
|
|
|
) : null}
|
|
|
|
{window.innerWidth < 1000 ? (
|
|
|
|
<section
|
|
|
|
className="mobile-home-static d-flex"
|
|
|
|
style={{ height: height, margin: "5px 0px" }}
|
|
|
|
>
|
|
|
|
{data.map((item, i) =>
|
|
|
|
status ? (
|
|
|
|
<Identifier data={item} key={i} status={status} />
|
|
|
|
) : (
|
|
|
|
<Item data={item} height={height} key={i} />
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</section>
|
|
|
|
) : null}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
|
|
|
|
alt="عکس"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
width: `${props.data.width}%`,
|
|
|
|
height: props.height,
|
|
|
|
}}
|
|
|
|
className="home-static__list2--item"
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
|
|
|
|
alt="عکس"
|
|
|
|
style={{ float: "left" }}
|
|
|
|
/>
|
|
|
|
<div className="d-flex flex-column">
|
|
|
|
<h2 style={{ color: "#02733c", fontSize: 12 }}>
|
|
|
|
{props.data.topText}
|
|
|
|
</h2>
|
|
|
|
<h2 style={{ color: "#7dc241", fontSize: 12 }}>
|
|
|
|
{props.data.bottomText}
|
|
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|