hamid zarghami
89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
'use client'
|
||
|
||
import { memo } from "react";
|
||
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
|
||
name: string;
|
||
contains: string;
|
||
price: string;
|
||
};
|
||
}
|
||
|
||
const MenuItem = ({ food }: MenuItemProps) => {
|
||
const quantity = useReceiptStore(state => state.items[food.id]?.quantity || 0);
|
||
|
||
const increment = useReceiptStore(state => state.increment);
|
||
const decrement = useReceiptStore(state => state.decrement);
|
||
|
||
return (
|
||
<div className="flex gap-4 w-full h-full">
|
||
<Image
|
||
className="rounded-xl w-28 h-28"
|
||
src={"/assets/images/food-preview.png"}
|
||
height={100}
|
||
width={100}
|
||
alt="Food image"
|
||
/>
|
||
<div className="w-full inline-flex flex-col justify-between">
|
||
<div>
|
||
<div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
|
||
<div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
|
||
{food.contains}
|
||
</div>
|
||
</div>
|
||
<div className="inline-flex gap-2 justify-between w-full items-center">
|
||
<span className="w-full text-sm mt-1" dir="ltr">{food.price} T</span>
|
||
<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)}
|
||
className="inline-flex w-full justify-center items-center gap-2"
|
||
>
|
||
<PlusIcon />
|
||
<div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
|
||
</button>
|
||
) : (
|
||
<>
|
||
<button
|
||
onClick={() => increment(food.id)}
|
||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
|
||
>
|
||
<PlusIcon className="text-foreground" />
|
||
</button>
|
||
<motion.div
|
||
key={quantity}
|
||
initial={{ scale: 1 }}
|
||
animate={{ scale: [1.2, 0.95, 1] }}
|
||
transition={{ duration: 0.3 }}
|
||
className="text-sm2 pt-0.5 font-semibold"
|
||
>
|
||
{quantity}
|
||
</motion.div>
|
||
|
||
|
||
<button
|
||
onClick={() => decrement(food.id)}
|
||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
|
||
>
|
||
<MinusIcon className="text-foreground" />
|
||
</button>
|
||
</>
|
||
)}
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default memo(MenuItem);
|