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.

120 lines
3.3 KiB

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";
4 years ago
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
},
};
export default class HomeStatic extends Component {
render() {
4 years ago
const status = proxy.status();
const { data, height, title, designType } = this.props;
4 years ago
console.log(data);
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 ? (
4 years ago
<section
className="mobile-home-static d-flex"
4 years ago
style={{ height: height }}
4 years ago
>
{data.map((item, i) =>
4 years ago
proxy.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>
)}
</>
);
};