78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "antd";
|
|
import DineInIcon from "components/Icons/DineInIcon";
|
|
import DownIcon from "components/Icons/DownIcon";
|
|
import PickupIcon from "components/Icons/PickupIcon";
|
|
import useBreakPoint from "hooks/useBreakPoint";
|
|
import styles from "../menu.module.css";
|
|
import { OrderType } from "pages/checkout/hooks/types.ts";
|
|
|
|
interface ResponsiveServicesProps {
|
|
orderType: string;
|
|
translations: {
|
|
common: {
|
|
dineIn: string;
|
|
pickup: string;
|
|
more: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
export default function ResponsiveServices({
|
|
orderType,
|
|
translations,
|
|
}: ResponsiveServicesProps) {
|
|
const { isMobile } = useBreakPoint();
|
|
|
|
// Hide pickup service if screen width is less than 400px (insufficient for 3 services)
|
|
const shouldHidePickup = isMobile;
|
|
|
|
return (
|
|
<div className={styles.services}>
|
|
<Button
|
|
className={
|
|
orderType == OrderType.DineIn
|
|
? styles.activeServiceButton
|
|
: styles.serviceButton
|
|
}
|
|
icon={
|
|
<div className={styles.dineInIcon}>
|
|
<DineInIcon className={`${styles.icon}`} />
|
|
</div>
|
|
}
|
|
>
|
|
{translations.common.dineIn}
|
|
</Button>
|
|
|
|
{!shouldHidePickup && (
|
|
<Button
|
|
className={
|
|
orderType == OrderType.Pickup
|
|
? styles.activeServiceButton
|
|
: styles.serviceButton
|
|
}
|
|
icon={
|
|
<div className={styles.pickupIcon}>
|
|
<PickupIcon className={`${styles.pickupIcon} ${styles.icon}`} />
|
|
</div>
|
|
}
|
|
>
|
|
{translations.common.pickup}
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
className={
|
|
orderType == "more"
|
|
? styles.activeServiceButton
|
|
: styles.serviceButton
|
|
}
|
|
>
|
|
{translations.common.more}{" "}
|
|
<DownIcon className={`${styles.downIcon} ${styles.icon}`} />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|