fix: cart layouts

This commit is contained in:
Mahyar Khanbolooki
2025-07-30 00:59:39 +03:30
parent 25913deac9
commit 0c41316411
+23 -7
View File
@@ -4,25 +4,41 @@ import Button from '@/components/button/PrimaryButton';
import { ScrollArea } from '@/components/ui/scrollarea'; import { ScrollArea } from '@/components/ui/scrollarea';
import { useReceiptStore } from '@/zustand/receiptStore'; import { useReceiptStore } from '@/zustand/receiptStore';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Trash } from 'iconsax-react'; import { ArrowLeft, Trash } from 'iconsax-react';
import { PlusIcon, MinusIcon } from 'lucide-react'; import { PlusIcon, MinusIcon } from 'lucide-react';
import { useRouter } from 'next/navigation';
import React from 'react' import React from 'react'
type Props = object type Props = object
const CartIndex = ({ }: Props) => { const CartIndex = ({ }: Props) => {
const router = useRouter();
const quantity = useReceiptStore(state => state.items[0]?.quantity || 0); const quantity = useReceiptStore(state => state.items[0]?.quantity || 0);
const increment = useReceiptStore(state => state.increment); const increment = useReceiptStore(state => state.increment);
const decrement = useReceiptStore(state => state.decrement); const decrement = useReceiptStore(state => state.decrement);
return ( return (
<div className='absolute top-0 left-0 bg-container bottom-0 p-4 pb-0 right-0 z-[100] h-full gap-4'> <div className='absolute top-0 left-0 bg-container bottom-0 flex flex-col px-4 pt-10 right-0 z-[100] h-full'>
<h1 className='text-lg'>سبد خرید</h1> <h1 className='text-lg flex justify-between items-center pb-10'>
<Trash
className='cursor-pointer'
size='24'
color='currentColor'
onClick={() => { router.back() }}
/>
سبد خرید
<ArrowLeft
className='cursor-pointer'
size='24'
color='currentColor'
onClick={() => { router.back() }}
/>
</h1>
<ScrollArea scrollHideDelay={0} className='flex flex-col h-full pt-4' dir='rtl'> <div className='flex overflow-y-auto noscrollbar flex-col h-full py-4 ' dir='rtl'>
<ul className="flex-1 pb-10"> <ul className="pb-10 flex-1">
<li className=''> <li className=''>
<div className='grid grid-cols-2 justify-between'> <div className='grid grid-cols-2 justify-between'>
<div className='text-sm'>کباب چوبی ژیوان (سیخ چوبی)</div> <div className='text-sm'>کباب چوبی ژیوان (سیخ چوبی)</div>
@@ -88,14 +104,14 @@ const CartIndex = ({ }: Props) => {
</div> </div>
</div> </div>
<div className='grid grid-cols-2 pt-4 pb-10'> <div className='grid grid-cols-2 pt-4'>
<div className='grid grid-rows-2'> <div className='grid grid-rows-2'>
<div className='text-xs'>جمع خرید:</div> <div className='text-xs'>جمع خرید:</div>
<div className="text-sm font-medium">560.000 تومان</div> <div className="text-sm font-medium">560.000 تومان</div>
</div> </div>
<Button>مشاهده فاکتور و پرداخت</Button> <Button>مشاهده فاکتور و پرداخت</Button>
</div> </div>
</ScrollArea> </div>
</div> </div>
) )