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.
86 lines
3.1 KiB
86 lines
3.1 KiB
import React from "react"; |
|
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
desktop: { |
|
info: { |
|
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
|
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
}, |
|
price: { |
|
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, |
|
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
|
}, |
|
counter: { |
|
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, |
|
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, |
|
}, |
|
delete: { |
|
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
|
}, |
|
}, |
|
}; |
|
|
|
export default function Item(props) { |
|
const { data, handleCounter, handleDelete } = props; |
|
return ( |
|
<tr className="cart-item d-flex align-items-center"> |
|
<td className="cart-item__info d-flex"> |
|
<img src={data.image} alt={data.title} /> |
|
<div className="d-flex flex-column justify-content-center"> |
|
<strong style={{ fontSize: fontSize.desktop.info.strong }}> |
|
{data.title} |
|
</strong> |
|
<p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p> |
|
<span style={{ fontSize: fontSize.desktop.info.span }}> |
|
{data.options}بسته الحاقی: |
|
</span> |
|
</div> |
|
</td> |
|
<td className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
|
<strong style={{ fontSize: fontSize.desktop.price.strong }}> |
|
{data.price} تومان |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.price.span }}> |
|
{data.slicePrice} قیمت هر واحد |
|
</span> |
|
</td> |
|
<td className="cart-item__counter d-flex align-items-center"> |
|
<div className="cart-item__counter--box d-flex justify-content-around align-items-center"> |
|
<button |
|
onClick={() => handleCounter("increase", data.id)} |
|
style={{ fontSize: fontSize.desktop.counter.button }} |
|
> |
|
+ |
|
</button> |
|
<span style={{ fontSize: fontSize.desktop.counter.span }}> |
|
{data.number} |
|
</span> |
|
<button |
|
onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)} |
|
style={{ fontSize: fontSize.desktop.counter.button }} |
|
> |
|
- |
|
</button> |
|
</div> |
|
</td> |
|
<td className="cart-item__delete d-flex align-items-center justify-content-center"> |
|
<DeleteOutlineOutlinedIcon |
|
style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }} |
|
onClick={() => handleDelete(data.id)} |
|
/> |
|
<span |
|
onClick={() => handleDelete(data.id)} |
|
style={{ fontSize: fontSize.desktop.delete.span }} |
|
> |
|
حذف |
|
</span> |
|
</td> |
|
</tr> |
|
); |
|
}
|
|
|