cart margin top

src/app/[name]/(Main)/cart/CartPage.tsx

@@ -1,31 +1,31 @@
-'use client';
+"use client";
 
-import React from 'react';
+import { useGetFoods } from "@/app/[name]/(Main)/hooks/useMenuData";
-import { useRouter } from 'next/navigation';
+import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
-import { useTranslation } from 'react-i18next';
+import Button from "@/components/button/PrimaryButton";
-import { ArrowLeft, Trash } from 'iconsax-react';
+import NotificationBellIcon from "@/components/icons/NotificationBellIcon";
-import Image from 'next/image';
+import MenuItem from "@/components/listview/MenuItem";
-import { useCart } from './hook/useCart';
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
-import CartSummary from './components/CartSummary';
+import PagerModal from "@/components/pager/PagerModal";
-import Prompt from '@/components/utils/Prompt';
+import Prompt from "@/components/utils/Prompt";
-import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
+import { ArrowLeft, Trash } from "iconsax-react";
-import MenuItem from '@/components/listview/MenuItem';
+import Image from "next/image";
-import MenuItemRenderer from '@/components/listview/MenuItemRenderer';
+import { useRouter } from "next/navigation";
-import { useGetAbout } from '../about/hooks/useAboutData';
+import React from "react";
-import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
+import { useTranslation } from "react-i18next";
-import { useGetCartItems } from './hooks/useCartData';
+import { useGetAbout } from "../about/hooks/useAboutData";
-import PagerModal from '@/components/pager/PagerModal';
+import CartSkeleton from "./components/CartSkeleton";
-import Button from '@/components/button/PrimaryButton';
+import CartSummary from "./components/CartSummary";
-import NotificationBellIcon from '@/components/icons/NotificationBellIcon';
+import { useCart } from "./hook/useCart";
-import CartSkeleton from './components/CartSkeleton';
+import { useGetCartItems } from "./hooks/useCartData";
 import {
   cartItemToFood,
   guestCartItemsToFoods,
   hasCartEntries,
-} from './lib/cartUtils';
+} from "./lib/cartUtils";
 
 const CartPage = () => {
-  const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
+  const { t } = useTranslation("parallels", { keyPrefix: "Cart" });
   const router = useRouter();
   const { isSuccess } = useGetProfile();
   const { clearCart, items } = useCart();
@@ -35,7 +35,7 @@ const CartPage = () => {
   const [showClearConfirm, setShowClearConfirm] = React.useState(false);
   const [showPagerModal, setShowPagerModal] = React.useState(false);
 
-  const isPremium = aboutData?.data?.plan === 'premium';
+  const isPremium = aboutData?.data?.plan === "premium";
 
   const cartFoods = React.useMemo(() => {
     if (isSuccess) {
@@ -74,23 +74,25 @@ const CartPage = () => {
   };
 
   return (
-    <div className='overflow-y-auto h-full noscrollbar flex flex-col bg-background'>
+    <div className="overflow-y-auto h-full noscrollbar flex flex-col bg-background">
-      <div className='grid grid-cols-3 items-center'>
+      <div className="grid grid-cols-3 items-center mt-6">
         {isCartEmpty ? (
           <span></span>
         ) : (
           <Trash
-            className='cursor-pointer place-self-start'
+            className="cursor-pointer place-self-start"
-            size='24'
+            size="24"
-            color='currentColor'
+            color="currentColor"
             onClick={() => setShowClearConfirm(true)}
           />
         )}
-        <h1 className='text-sm2 place-self-center font-medium'>{t('Heading')}</h1>
+        <h1 className="text-sm2 place-self-center font-medium">
+          {t("Heading")}
+        </h1>
         <ArrowLeft
-          className='cursor-pointer place-self-end'
+          className="cursor-pointer place-self-end"
-          size='24'
+          size="24"
-          color='currentColor'
+          color="currentColor"
           onClick={() => router.back()}
         />
       </div>
@@ -99,19 +101,23 @@ const CartPage = () => {
         {showInitialCartLoad || guestAwaitingMenu ? (
           <CartSkeleton />
         ) : isCartEmpty ? (
-          <div className='flex flex-col items-center justify-center gap-4 h-full'>
+          <div className="flex flex-col items-center justify-center gap-4 h-full">
             <Image
-              src='/assets/images/cart.png'
+              src="/assets/images/cart.png"
-              alt='cart'
+              alt="cart"
               width={120}
               height={120}
-              className='object-contain'
+              className="object-contain"
             />
-            <div className='flex flex-col items-center gap-2 text-sm2 text-muted-foreground'>
+            <div className="flex flex-col items-center gap-2 text-sm2 text-muted-foreground">
-              <p>{t('EmptyStateTitle', { defaultValue: 'سبد خرید شما خالی است' })}</p>
+              <p>
-              <p className='text-xs'>
+                {t("EmptyStateTitle", {
-                {t('EmptyStateDescription', {
+                  defaultValue: "سبد خرید شما خالی است",
-                  defaultValue: 'برای افزودن غذا، به منوی رستوران برگردید.',
+                })}
+              </p>
+              <p className="text-xs">
+                {t("EmptyStateDescription", {
+                  defaultValue: "برای افزودن غذا، به منوی رستوران برگردید.",
                 })}
               </p>
             </div>
@@ -119,25 +125,33 @@ const CartPage = () => {
         ) : (
           <div className="flex flex-col gap-4 pb-24">
             {!isPremium && (
-              <div className='bg-container rounded-container p-4 border border-border shadow-sm'>
+              <div className="bg-container rounded-container p-4 border border-border shadow-sm">
-                <div className='flex items-start gap-3 mb-4'>
+                <div className="flex items-start gap-3 mb-4">
-                  <div className='shrink-0 mt-0.5'>
+                  <div className="shrink-0 mt-0.5">
-                    <NotificationBellIcon width={24} height={24} className="currentColor" />
+                    <NotificationBellIcon
+                      width={24}
+                      height={24}
+                      className="currentColor"
+                    />
                   </div>
-                  <div className='flex-1'>
+                  <div className="flex-1">
-                    <p className='text-sm font-medium text-foreground mb-1'>
+                    <p className="text-sm font-medium text-foreground mb-1">
                       ثبت سفارش
                     </p>
-                    <p className='text-xs text-muted-foreground leading-5'>
+                    <p className="text-xs text-muted-foreground leading-5">
                       برای ثبت سفارش، لطفاً گارسون را صدا کنید
                     </p>
                   </div>
                 </div>
                 <Button
                   onClick={() => setShowPagerModal(true)}
-                  className='w-full dark:bg-white! dark:text-black! flex items-center justify-center gap-2'
+                  className="w-full dark:bg-white! dark:text-black! flex items-center justify-center gap-2"
                 >
-                  <NotificationBellIcon width={18} height={18} className="text-white dark:text-black!" />
+                  <NotificationBellIcon
+                    width={18}
+                    height={18}
+                    className="text-white dark:text-black!"
+                  />
                   <span>صدا کردن گارسون</span>
                 </Button>
               </div>
@@ -152,12 +166,18 @@ const CartPage = () => {
         )}
       </div>
 
-      <div className={showClearConfirm ? 'fixed inset-0 z-1001' : 'pointer-events-none fixed inset-0 z-1001'}>
+      <div
+        className={
+          showClearConfirm
+            ? "fixed inset-0 z-1001"
+            : "pointer-events-none fixed inset-0 z-1001"
+        }
+      >
         <Prompt
-          title='پاک کردن سبد خرید'
+          title="پاک کردن سبد خرید"
-          description='آیا از پاک کردن تمامی آیتم‌های سبد خرید اطمینان دارید؟'
+          description="آیا از پاک کردن تمامی آیتم‌های سبد خرید اطمینان دارید؟"
-          textConfirm='بله'
+          textConfirm="بله"
-          textCancel='خیر'
+          textCancel="خیر"
           onConfirm={handleClearCart}
           onCancel={toggleClearConfirm}
           visible={showClearConfirm}
@@ -165,7 +185,10 @@ const CartPage = () => {
         />
       </div>
 
-      <PagerModal visible={showPagerModal} onClose={() => setShowPagerModal(false)} />
+      <PagerModal
+        visible={showPagerModal}
+        onClose={() => setShowPagerModal(false)}
+      />
     </div>
   );
 };