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.

60 lines
1.4 KiB

import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import "./index.scss";
export default class HomeStatic extends Component {
render() {
const { data, height, title } = this.props;
return (
<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>
);
}
}
const Item = (props) => {
return (
<div
style={{
width: `${props.data.width}%`,
height: props.height,
}}
className="home-static__list--item d-flex"
>
<img
src={props.data.image}
alt="عکس"
style={{
width: '100%',
height: '100%',
}}
/>
</div>
);
};