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.
92 lines
2.4 KiB
92 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" |
|
style={{ minHeight : height }} |
|
> |
|
{ |
|
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={props.data.image} alt="عکس" /> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
}; |
|
|
|
|