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.
53 lines
1.3 KiB
53 lines
1.3 KiB
import React, { Component } from "react"; |
|
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; |
|
import {Link} from 'react-router-dom'; |
|
|
|
import "./index.scss"; |
|
export default class HomeHeader extends Component { |
|
render() { |
|
const { data, height, title } = this.props; |
|
return ( |
|
<header |
|
className={ |
|
height ? "home-header d-flex flex-column" : "home-header 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-scroll__list d-flex"> |
|
{data.map((item, i) => ( |
|
<Item data={item} key={i} /> |
|
))} |
|
</div> |
|
|
|
</header> |
|
); |
|
} |
|
} |
|
|
|
const Item = (props) => { |
|
return ( |
|
<Link to={props.data.link} style={{ |
|
width: `${props.data.width}%`, |
|
height: "100%", |
|
}}> |
|
<img |
|
src={props.data.image} |
|
alt="عکس" |
|
style={{ |
|
width: `${props.data.width}%`, |
|
height: "100%", |
|
}} |
|
/> |
|
</Link> |
|
); |
|
};
|
|
|