setup: route group

2025-07-31 19:13:24 +03:30
parent 118daf7cc0
commit 52b5b880d0
25 changed files with 169 additions and 111 deletions
@@ -0,0 +1,127 @@
+'use client';
+
+import Button from '@/components/button/PrimaryButton';
+import { useReceiptStore } from '@/zustand/receiptStore';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Trash } from 'iconsax-react';
+import { PlusIcon, MinusIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import React from 'react'
+import { useTranslation } from 'react-i18next';
+
+type Props = object
+
+const CartIndex = ({ }: Props) => {
+  const { t } = useTranslation('parallels', {
+    keyPrefix: 'Cart'
+  });
+  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='bg-inherit flex flex-col h-full'>
+      <div className='grid grid-cols-3 items-center py-4 '>
+        <Trash
+          className='cursor-pointer place-self-start'
+          size='24'
+          color='currentColor'
+          onClick={() => { router.back() }}
+        />
+        <h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
+        <ArrowLeft
+          className='cursor-pointer place-self-end'
+          size='24'
+          color='currentColor'
+          onClick={() => { router.back() }}
+        />
+      </div>
+
+      <div className='flex overflow-y-auto noscrollbar flex-col h-full pt-4' dir='rtl'>
+
+        <ul className="pb-10 flex-1">
+          <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'>
+              {t('InputDescription.Label')}
+            </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={t('InputDescription.Placeholder')}
+              id='description'
+              name='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'>
+          <div className='grid grid-rows-2'>
+            <div className='text-xs'>{t('SumOfItemsLabel')}</div>
+            <div className="text-sm font-medium">{t('SumOfItemsValue').replace('{price}', '560.000')}</div>
+          </div>
+          <Button>
+            {t('ButtonCheckout')}
+          </Button>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default CartIndex