Initial commit

src/pages/menu/components/ResponsiveServices.tsx

@@ -0,0 +1,74 @@
+"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>
+  );
+}