54 lines
1.4 KiB
54 lines
1.4 KiB
import React from 'react'; |
|
import {Link} from "react-router-dom"; |
|
|
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, |
|
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 34, |
|
}; |
|
|
|
export default function Vitrin(props){ |
|
|
|
const {data} = props; |
|
const style = { |
|
// backgroundImage: `url('${data.imageUrl}')`, |
|
background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, |
|
flex: data.flex, |
|
backgroundRepeat: 'no-repeat', |
|
backgroundSize: '100%', |
|
backgroundOpacity: '60%', |
|
margin: 5, |
|
borderRadius: 10, |
|
color: data.color, |
|
}; |
|
|
|
return( |
|
<div className="mobile-home-static__vitrin d-flex flex-column" style={style}> |
|
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1> |
|
<div className="d-flex align-items-end"> |
|
{ |
|
data.books.map((item,i) => ( |
|
<Item data={item} key={i} /> |
|
)) |
|
} |
|
<Link to={data.link} style={{fontSize: fontSize.span }}>مشاهده بیشتر</Link> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
|
|
const Item = (props) => { |
|
const {data} = props; |
|
return( |
|
<Link to={'/products/'+ data.id} className="mobile-home-static__vitrin--product d-flex"> |
|
<img src={data.imageUrl} alt={'عکس محصول'} /> |
|
</Link> |
|
); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|