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.

89 lines
2.4 KiB

import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import Identifier from "./Identifier/index";
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, 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">
{data.map((item, i) => (
<Identifier data={item} 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>
) : null}
</>
);
};