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