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 { useReceiptStore } from '@/zustand/receiptStore';
import { motion } from 'framer-motion';
import { Trash } from 'iconsax-react';
import { ArrowLeft, Trash } from 'iconsax-react';
import { PlusIcon, MinusIcon } from 'lucide-react';
import { useRouter } from 'next/navigation';
import React from 'react'
type Props = object
const CartIndex = ({ }: Props) => {
const router = useRouter();
const quantity = useReceiptStore(state => state.items[0]?.quantity || 0);
const increment = useReceiptStore(state => state.increment);
const decrement = useReceiptStore(state => state.decrement);
return (
<div className='absolute top-0 left-0 bg-container bottom-0 p-4 pb-0 right-0 z-[100] h-full gap-4'>
<h1 className='text-lg'>سبد خرید</h1>
<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 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=''>
<div className='grid grid-cols-2 justify-between'>
<div className='text-sm'>کباب چوبی ژیوان (سیخ چوبی)</div>
@@ -88,14 +104,14 @@ const CartIndex = ({ }: Props) => {
</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='text-xs'>جمع خرید:</div>
<div className="text-sm font-medium">560.000 تومان</div>
</div>
<Button>مشاهده فاکتور و پرداخت</Button>
</div>
</ScrollArea>
</div>
</div>
)