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;