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