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
@@ -0,0 +1,13 @@
+'use client';
+
+import React from 'react'
+
+function DialogsLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <main className='h-full w-full bg-container lg:bg-background pt-4 pb-6 px-6'>
+            {children}
+        </main>
+    )
+}
+
+export default DialogsLayout
@@ -0,0 +1,53 @@
+'use client';
+
+import { ef } from '@/lib/helpers/utfNumbers';
+import { ArrowLeft, Trash } from 'iconsax-react';
+import { useRouter } from 'next/navigation';
+import React from 'react'
+import { useTranslation } from 'react-i18next';
+
+type Props = object
+
+export default function NotificationsIndex({ }: Props) {
+    const { t } = useTranslation('notifications')
+    const router = useRouter();
+
+    return (
+        <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
+            <div className='grid grid-cols-3 items-center py-4 '>
+                <span></span>
+                <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>
+
+            <ul className='flex flex-col gap-4 pb-20'>
+                <li className='bg-container py-5 px-4 rounded-container shadow-lg'>
+                    <h5 className='font-medium text-sm'>عنوان پیام</h5>
+                    <p className='text-xs mt-2 leading-5'>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
+
+                    <div className='flex items-center justify-between mt-5 '>
+                        <div className="flex items-center justify-start gap-2">
+                            <span className='px-4 pt-1 pb-0.5 text-xs bg-primary text-white rounded-md'>
+                                {t('Tags.New')}
+                            </span>
+                            <span className='text-disabled2 text-xs pt-0.5'>
+                                {ef('28 مرداد 1401')}
+                            </span>
+                            <span className='size-1.5 bg-disabled rounded-full'></span>
+                            <span className='text-disabled2 text-xs pt-0.5'>
+                                {ef('21:32')}
+                            </span>
+                        </div>
+                        <Trash size={24} className='stroke-primary' />
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+    )
+}
@@ -0,0 +1,90 @@
+'use client';
+
+import Button from '@/components/button/PrimaryButton';
+import InputField from '@/components/input/InputField';
+import { ArrowLeft } from 'iconsax-react';
+import Image from 'next/image'
+import { useRouter } from 'next/navigation';
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type Props = object;
+
+function ReportIndex({ }: Props) {
+    const router = useRouter();
+
+    const { t } = useTranslation('parallels', {
+        keyPrefix: 'Report'
+    })
+
+    return (
+        <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
+            <div className='grid grid-cols-3 items-center'>
+                <span></span>
+                <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 lg:justify-center lg:items-center flex-1 bg-inherit">
+                <div className="w-full lg:w-fit lg:h-fit lg:min-w-3/4 lg:min-h-3/4 flex flex-col-reverse lg:grid lg:gap-8 lg:bg-container lg:grid-cols-2 lg:p-8 lg:rounded-container lg:justify-around lg:items-center bg-inherit">
+                    <form className='flex-1 bg-inherit flex flex-col justify-between items-end'>
+                        <div className='bg-inherit lg:max-w-4/5 w-full flex flex-col justify-between flex-1'>
+                            <div className="bg-inherit flex flex-col h-full">
+                                <div className='w-full px-4 mt-10'>
+                                    <h2 className='text-sm2 font-medium'>{t('FormHeading')}</h2>
+                                    <p className='text-sm2 text-disabled-text mt-2'>{t('Description')}</p>
+                                </div>
+                                <InputField
+                                    className='w-full mt-6 px-4 bg-inherit'
+                                    type='text'
+                                    placeholder={t('InputTitle.Placeholder')}
+                                    labelText={t('InputTitle.Label')}
+                                    htmlFor='report-title'
+                                    onChange={() => { }}
+                                />
+
+                                <div className='relative bg-inherit mt-6 flex-1'>
+                                    <textarea
+                                        className='w-full px-4 py-2.5 text-sm2 leading-6 outline-0 border border-border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0'
+                                        placeholder={t('InputDescription.Placeholder')}
+                                        id='report-description'
+                                        name='report-description'
+                                    ></textarea>
+                                    <span className='absolute -top-2 right-2 px-2 bg-inherit text-foreground text-xs'>
+                                        {t('InputDescription.Label')}
+                                    </span>
+                                </div>
+                            </div>
+                            <Button
+                                className='w-full px-4 mt-6'
+                                type='submit'
+                                onClick={() => { }}
+                            >
+                                {t('ButtonSubmit')}
+                            </Button>
+                        </div>
+
+                    </form>
+
+                    <div className='relative'>
+                        <Image
+                            className='place-self-center w-full px-4 mt-8 md:max-w-4/5'
+                            src={'/assets/images/report-hero.svg'}
+                            height={200}
+                            width={312}
+                            unoptimized
+                            alt='report hero image'
+                        />
+                        <hr className='absolute bottom-0 left-9 right-4 border-border' />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ReportIndex