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.
87 lines
3.2 KiB
87 lines
3.2 KiB
import React, { Component } from "react"; |
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
|
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, |
|
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, |
|
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
|
strong: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 90, |
|
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
}, |
|
mobile: { |
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, |
|
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
|
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, |
|
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
|
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
|
}, |
|
}; |
|
|
|
const Factor = (props) => { |
|
const { list, parent } = props; |
|
|
|
const totalPrice = () => { |
|
let total = 0; |
|
for (let i = 0; i < parent.state.list.length; i++) { |
|
total += parent.state.list[i].price * parent.state.list[i].number; |
|
} |
|
return total; |
|
}; |
|
return ( |
|
<> |
|
{window.innerWidth < 1000 ? ( |
|
<div className="mobile-factor d-flex flex-column"> |
|
<div className="d-flex justify-content-between"> |
|
<strong>مبلغ سبد خرید</strong> |
|
<span>{totalPrice()} تومان</span> |
|
</div> |
|
<div className="d-flex justify-content-between"> |
|
<strong>هزینه ارسال</strong> |
|
<span>{props.parent.state.selectedDelivery.price} تومان</span> |
|
</div> |
|
<div className="d-flex justify-content-between"> |
|
<strong>میزان تخفیف</strong> |
|
<span>{props.parent.state.discount} تومان</span> |
|
</div> |
|
</div> |
|
) : null} |
|
{window.innerWidth > 1000 ? ( |
|
<div className="factor d-flex flex-column"> |
|
<div className="d-flex justify-content-between"> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
مبلغ سبد خرید |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{totalPrice()} تومان |
|
</span> |
|
</div> |
|
<div className="d-flex justify-content-between"> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
هزینه ارسال |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{props.parent.state.selectedDelivery.price} تومان |
|
</span> |
|
</div> |
|
<div className="d-flex justify-content-between"> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
میزان تخفیف |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{props.parent.state.discount} تومان |
|
</span> |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
}; |
|
|
|
export default Factor;
|
|
|