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

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