fix: cart layouts
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user