add: food details page

2025-07-17 13:56:54 +03:30
parent 1c4b791047
commit 3af9fd8f46
2 changed files with 120 additions and 0 deletions
@@ -0,0 +1,120 @@
+'use client'
+
+import MinusIcon from '@/components/icons/MinusIcon'
+import PlusIcon from '@/components/icons/PlusIcon'
+import { useReceiptStore } from '@/zustand/receiptStore'
+import { motion } from 'framer-motion'
+import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
+import Image from 'next/image'
+import React from 'react'
+
+type Props = object
+
+function FoodPage({ }: Props) {
+    const quantity = useReceiptStore(state => state.items[0]?.quantity || 0);
+
+    const increment = useReceiptStore(state => state.increment);
+    const decrement = useReceiptStore(state => state.decrement);
+
+
+    return (
+        <div className='w-full'>
+            <div className="relative w-full rounded-2xl overflow-hidden">
+                <Image
+                    className='w-full '
+                    src={'/assets/images/food-preview-hq.png'}
+                    alt='Food image'
+                    height={100}
+                    width={100}
+                    unoptimized
+                    priority
+                />
+                <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
+                    <div className="bg-white rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 font-bold">
+                        خوراک
+                    </div>
+                    <button>
+                        <ArrowLeft size={24} className='stroke-white' />
+                    </button>
+                </div>
+            </div>
+
+            <div className="relative px-6 pt-6 pb-7.5 bg-white w-full rounded-3xl overflow-hidden -translate-y-6">
+                <div className="w-full inline-flex justify-between items-center">
+                    <div className="text-base font-bold">
+                        کباب چوبی مخصوص
+                    </div>
+                    <button className='p-2 bg-[#EAECF0] rounded-lg'>
+                        <Heart size={24} className='fill-black' />
+                    </button>
+                </div>
+
+                <div className="mt-4 text-xs">
+                    <div className='flex items-center gap-1'>
+                        <Clock size={14} className='stroke-disabled-text' />
+                        <span className='text-disabled-text'>زمان پخت و آماده سازی: 25 دقیقه</span>
+                    </div>
+                    <div className='flex items-center gap-2 mt-2'>
+                        <Cup size={14} className='stroke-disabled-text' />
+                        <span className='text-disabled-text'>1500 امتیاز برای هر بار خرید</span>
+                    </div>
+                    <div className='flex items-center gap-2 mt-2'>
+                        <TruckTick size={14} className='stroke-disabled-text' />
+                        <span className='text-disabled-text'>ارسال با پیک</span>
+                    </div>
+                </div>
+
+                <div className="mt-4 text-xs">
+                    محتویات: <br />
+                    گوشت، سبزیجات، پیاز، ادویه جات معطر و ....
+                </div>
+
+                <div className='mt-12 flex justify-between items-center'>
+                    <span dir='ltr'>{0} 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(0)}
+                                className="inline-flex w-full justify-center items-center gap-2"
+                            >
+                                <PlusIcon />
+                                <div className="text-sm2 pt-0.5 font-medium">افزودن</div>
+                            </button>
+                        ) : (
+                            <>
+                                <button
+                                    onClick={() => increment(0)}
+                                    className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                                >
+                                    <PlusIcon />
+                                </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(0)}
+                                    className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                                >
+                                    <MinusIcon />
+                                </button>
+                            </>
+                        )}
+                    </motion.div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FoodPage