improve: menu items visuals

src/components/listview/MenuItem.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 import PlusIcon from "@/components/icons/PlusIcon";
 import MinusIcon from "@/components/icons/MinusIcon";
 import { useReceiptStore } from "@/zustand/receiptStore";
-
+import { motion } from "framer-motion";
 interface MenuItemProps {
   food: {
     id: number
@@ -23,7 +23,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
   const decrement = useReceiptStore(state => state.decrement);
 
   return (
-    <div className="flex gap-4 w-full">
+    <div className="flex gap-4 w-full h-full">
       <Image
         className="rounded-xl w-28 h-28"
         src={"/assets/images/food-preview.png"}
@@ -31,7 +31,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
         width={100}
         alt="Food image"
       />
-      <div className="w-full h-full inline-flex flex-col justify-between">
+      <div className="w-full inline-flex flex-col justify-between">
         <div>
           <div className="text-sm2 font-medium">{food.name}</div>
           <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
@@ -40,7 +40,10 @@ const MenuItem = ({ food }: MenuItemProps) => {
         </div>
         <div className="inline-flex justify-between w-full items-end">
           <span className="w-full" dir="ltr">{food.price} T</span>
-          <div className="bg-background max-w-[115px] rounded-lg w-full h-8 inline-flex py-1 px-[5px] justify-between items-center gap-2">
+          <motion.div
+            whileTap={{ scale: 1.05 }}
+            className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"
+          >
             {quantity <= 0 ? (
               <button
                 onClick={() => increment(food.id)}
@@ -53,20 +56,30 @@ const MenuItem = ({ food }: MenuItemProps) => {
               <>
                 <button
                   onClick={() => increment(food.id)}
-                  className="bg-white rounded-sm p-2"
+                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
                 >
                   <PlusIcon />
                 </button>
-                <div className="text-sm2 pt-0.5 font-semibold">{quantity}</div>
+                <motion.div
+                  key={quantity}
+                  initial={{ scale: 1 }}
+                  animate={{ scale: [1.2, 0.95, 1] }}
+                  transition={{ duration: 0.3 }}
+                  className="text-sm2 pt-1 font-semibold"
+                >
+                  {quantity}
+                </motion.div>
+
+
                 <button
                   onClick={() => decrement(food.id)}
-                  className="bg-white rounded-sm p-2"
+                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
                 >
                   <MinusIcon />
                 </button>
               </>
             )}
-          </div>
+          </motion.div>
         </div>
       </div>
     </div>