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.
56 lines
1.6 KiB
56 lines
1.6 KiB
import React, { Component } from "react"; |
|
|
|
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; |
|
import Product from './Product/index'; |
|
import Subject from './Subject/index'; |
|
import MyProduct from './MyProduct/index'; |
|
import dropdown from '../../../assets/icons/dropdown.png'; |
|
|
|
import "./index.scss"; |
|
export default class HomeScroll extends Component { |
|
render() { |
|
const { data, height, title,designType, moreText, number } = this.props; |
|
return ( |
|
<div |
|
className="mobile-home-scroll d-flex flex-column" |
|
style={{ height: height }} |
|
> |
|
<div className="mobile-home-scroll__header d-flex"> |
|
<div className="mobile-home-scroll__header--right d-flex"> |
|
<h1>{title}</h1> |
|
<span></span> |
|
|
|
</div> |
|
<div className="mobile-home-scroll__header--more d-flex"> |
|
<span>{moreText}</span> |
|
<img src={dropdown} alt='فلش' /> |
|
</div> |
|
</div> |
|
<div className="mobile-home-scroll__list d-flex"> |
|
{data.map((item, i) => ( |
|
<Item data={item} designType={designType} number={number} key={i} /> |
|
))} |
|
</div> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
const Item = (props) => { |
|
return ( |
|
<> |
|
{ |
|
props.designType === 'product' ? |
|
<Product data={props.data} number={props.number} /> : null |
|
} |
|
{ |
|
props.designType === 'subjects' ? |
|
<Subject data={props.data} number={props.number} /> : null |
|
} |
|
{ |
|
props.designType === 'myProduct' ? |
|
<MyProduct data={props.data} number={props.number} /> : null |
|
} |
|
</> |
|
); |
|
};
|
|
|