79 lines
2.8 KiB
79 lines
2.8 KiB
|
|
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 ? 12 : window.innerWidth / 90, |
|
span: window.innerWidth > maxDesktopSize ? 10 : 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 DeliveryMethod = (props) => { |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<div |
|
className="delivery-methods d-flex justify-content-between align-items-center" |
|
style={{ |
|
background: |
|
props.parent.state.selectedDelivery === props.data |
|
? "#ccffcc" |
|
: "white", |
|
}} |
|
onClick={() => |
|
props.parent.setState({ selectedDelivery: props.data }) |
|
} |
|
> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
{props.data.name} |
|
</strong> |
|
<div className="d-flex flex-column align-items-center"> |
|
<h3 style={{ fontSize: fontSize.desktop.h3 }}> |
|
{props.data.price} |
|
</h3> |
|
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span> |
|
</div> |
|
</div> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<div |
|
className="mobile-delivery-methods d-flex justify-content-between align-items-center" |
|
style={{ |
|
background: |
|
props.parent.state.selectedDelivery === props.data |
|
? "#ccffcc" |
|
: "white", |
|
}} |
|
onClick={() => |
|
props.parent.setState({ selectedDelivery: props.data }) |
|
} |
|
> |
|
<strong style={{ fontSize: fontSize.mobile.strong }}> |
|
{props.data.name} |
|
</strong> |
|
<div className="d-flex flex-column align-items-center"> |
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3> |
|
<span style={{ fontSize: fontSize.mobile.span }}>تومان</span> |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
}; |
|
|
|
export default DeliveryMethod; |