75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { Button, Grid } from "antd";
|
|
import DineInIcon from "components/Icons/DineInIcon";
|
|
import DownIcon from "components/Icons/DownIcon";
|
|
import PickupIcon from "components/Icons/PickupIcon";
|
|
import styles from "../menu.module.css";
|
|
|
|
interface ResponsiveServicesProps {
|
|
orderType: string;
|
|
translations: {
|
|
common: {
|
|
dineIn: string;
|
|
pickup: string;
|
|
more: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
const { useBreakpoint } = Grid;
|
|
|
|
export default function ResponsiveServices({ orderType, translations }: ResponsiveServicesProps) {
|
|
const { xs } = useBreakpoint();
|
|
|
|
// Hide pickup service if screen width is less than 400px (insufficient for 3 services)
|
|
const shouldHidePickup = xs;
|
|
|
|
return (
|
|
<div className={styles.services}>
|
|
<Button
|
|
className={
|
|
orderType == "dine-in"
|
|
? styles.activeServiceButton
|
|
: styles.serviceButton
|
|
}
|
|
icon={
|
|
<div className={styles.dineInIcon}>
|
|
<DineInIcon className={`${styles.icon}`} />
|
|
</div>
|
|
}
|
|
>
|
|
{translations.common.dineIn}
|
|
</Button>
|
|
|
|
{!shouldHidePickup && (
|
|
<Button
|
|
className={
|
|
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>
|
|
);
|
|
}
|