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.
118 lines
3.3 KiB
118 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"; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, |
|
}, |
|
}; |
|
|
|
export default class HomeStatic extends Component { |
|
render() { |
|
const status = proxy.status(); |
|
const { data, height, title } = 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>{window.t("موارد بیشتر")}</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 }} |
|
> |
|
{data.map((item, i) => |
|
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={window.t("عکس")} |
|
/> |
|
</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={window.t("عکس")} |
|
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> |
|
)} |
|
</> |
|
); |
|
};
|
|
|