add: cart page

2025-07-30 00:52:24 +03:30
parent 9361364e78
commit 25913deac9
1 changed files with 104 additions and 0 deletions
@@ -0,0 +1,104 @@
+'use client';
+
+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 { PlusIcon, MinusIcon } from 'lucide-react';
+import React from 'react'
+
+type Props = object
+
+const CartIndex = ({ }: 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='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>
+
+      <ScrollArea scrollHideDelay={0} className='flex flex-col h-full pt-4' dir='rtl'>
+
+        <ul className="flex-1 pb-10">
+          <li className=''>
+            <div className='grid grid-cols-2 justify-between'>
+              <div className='text-sm'>کباب چوبی ژیوان (سیخ چوبی)</div>
+              <div className='text-sm2 font-medium text-end'>69.000 T</div>
+            </div>
+            <div className='mt-6 flex justify-between items-center'>
+              <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 size={16} />
+                    <span className="text-sm2 pt-0.5 font-medium">افزودن</span>
+                  </button>
+                ) : (
+                  <>
+                    <button
+                      onClick={() => increment(0)}
+                      className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-1"
+                    >
+                      <PlusIcon size={16} />
+                    </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-1"
+                    >
+                      {quantity > 1 ? <MinusIcon size={16} /> : <Trash className='stroke-foreground' size={16} />} {/* Use PlusIcon for decrement if quantity is 1 or less */}
+                    </button>
+                  </>
+                )}
+              </motion.div>
+            </div>
+            <hr className='my-4 border-1 border-border' />
+
+          </li>
+        </ul>
+
+        <div>
+          <div className='relative'>
+            <h3 className='text-sm'>توضیحات:</h3>
+            <textarea
+              className='w-full px-4 py-2.5 mt-4 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
+              placeholder=''
+              id='report-description'
+              name='report-description'
+            ></textarea>
+            <span className='absolute top-4 right-2 px-2 bg-background text-foreground text-xs'>
+
+            </span>
+          </div>
+        </div>
+
+        <div className='grid grid-cols-2 pt-4 pb-10'>
+          <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>
+  )
+}
+
+export default CartIndex