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

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>
);
};