fix design bug

2025-12-24 11:32:29 +03:30
parent 4c4431198e
commit 26d11db1d4
15 changed files with 134 additions and 33 deletions
@@ -7,6 +7,7 @@ import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
 import type { Food } from '@/app/[name]/(Main)/types/Types';
 import { useCart } from '../hook/useCart';
 import { useTranslation } from 'react-i18next';
+import { CartItemsSkeleton } from './CartSkeleton';

 const CartItemsList = () => {
  const { data: foodsResponse, isFetching } = useGetFoods();
@@ -25,12 +26,7 @@ const CartItemsList = () => {
  }, [foods, items]);

  if (isFetching && !foods.length) {
-    return (
-      <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
-        <span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
-        <p>{t('LoadingCart', { defaultValue: 'در حال دریافت سبد خرید...' })}</p>
-      </div>
-    );
+    return <CartItemsSkeleton />;
  }

  if (cartFoods.length === 0) {
@@ -0,0 +1,67 @@
+'use client';
+
+import { Skeleton } from '@/components/ui/skeleton';
+import MenuItemRenderer from '@/components/listview/MenuItemRenderer';
+
+export const CartItemsSkeleton = () => {
+  return (
+    <div className='flex-1 space-y-4'>
+      {[...Array(3)].map((_, index) => (
+        <MenuItemRenderer key={index}>
+          <div className='flex gap-4 w-full h-full items-center'>
+            <Skeleton className='min-w-28 w-28 h-28 rounded-xl' />
+            <div className='w-full inline-flex flex-col justify-between'>
+              <div>
+                <Skeleton className='h-5 w-32 rounded-md mb-2' />
+                <Skeleton className='h-4 w-full rounded-md mb-1' />
+                <Skeleton className='h-4 w-3/4 rounded-md' />
+              </div>
+              <div className='inline-flex mt-2 gap-2 justify-between w-full items-center'>
+                <div className='w-full flex flex-col gap-1'>
+                  <Skeleton className='h-4 w-16 rounded-md' />
+                  <Skeleton className='h-4 w-20 rounded-md mt-1' />
+                </div>
+                <Skeleton className='max-w-[115px] w-full h-8 rounded-md' />
+              </div>
+            </div>
+          </div>
+        </MenuItemRenderer>
+      ))}
+    </div>
+  );
+};
+
+export const CartSummarySkeleton = () => {
+  return (
+    <>
+      <div className='mt-2'>
+        <div className='relative'>
+          <Skeleton className='h-5 w-32 rounded-md mb-4' />
+          <Skeleton className='w-full h-24 rounded-normal' />
+        </div>
+      </div>
+
+      <div className='fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border p-4 w-full'>
+        <div className='flex justify-between items-center gap-4'>
+          <div className='flex flex-col'>
+            <Skeleton className='h-3 w-24 rounded-md mb-2' />
+            <Skeleton className='h-5 w-32 rounded-md' />
+          </div>
+          <Skeleton className='h-10 w-32 rounded-md' />
+        </div>
+      </div>
+    </>
+  );
+};
+
+const CartSkeleton = () => {
+  return (
+    <>
+      <CartItemsSkeleton />
+      <CartSummarySkeleton />
+    </>
+  );
+};
+
+export default CartSkeleton;
+
@@ -8,12 +8,17 @@ import { useCart } from './hook/useCart';
 import CartItemsList from './components/CartItemsList';
 import CartSummary from './components/CartSummary';
 import Prompt from '@/components/utils/Prompt';
+import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
+import { CartSummarySkeleton } from './components/CartSkeleton';

 const CartIndex = () => {
  const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
  const router = useRouter();
  const { clearCart } = useCart();
  const [showClearConfirm, setShowClearConfirm] = React.useState(false);
+  const { data: foodsResponse, isFetching } = useGetFoods();
+  const foods = React.useMemo(() => foodsResponse?.data ?? [], [foodsResponse?.data]);
+  const isLoading = isFetching && !foods.length;

  const handleClearCart = (e: React.MouseEvent) => {
    e?.preventDefault();
@@ -48,7 +53,7 @@ const CartIndex = () => {

      <div className='flex overflow-y-auto noscrollbar flex-col h-full pt-4 gap-4 pb-24' dir='rtl'>
        <CartItemsList />
-        <CartSummary />
+        {isLoading ? <CartSummarySkeleton /> : <CartSummary />}
      </div>

      <div className={showClearConfirm ? 'fixed inset-0 z-1001' : 'pointer-events-none fixed inset-0 z-1001'}>
@@ -65,7 +65,7 @@ export const CarAddressSection = () => {
                        value={carAddress?.carColor || ''}
                        onChange={handleCarColorChange}
                        className="bg-inherit"
-                        inputClassName="text-xs"
+                        inputClassName="text-xs!"

                    />
                    <InputField
@@ -75,7 +75,7 @@ export const CarAddressSection = () => {
                        value={carAddress?.plateNumber || ''}
                        onChange={handlePlateNumberChange}
                        className="bg-inherit"
-                        inputClassName="text-xs"
+                        inputClassName="text-xs!"
                    />
                </div>
            </div>
@@ -1,7 +1,7 @@
 'use client';

 import Combobox from '@/components/combobox/Combobox';
-import { Box, Location, Car, TruckTick, Building } from 'iconsax-react';
+import { Box, Location, Car, Building } from 'iconsax-react';
 import { useTranslation } from 'react-i18next';
 import { useGetShipmentMethod } from '../../hooks/useOrderData';
 import { DeliveryMethod } from '../../types/Types';
@@ -33,19 +33,27 @@ export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: Shipping
            case 'deliveryCar':
                return Car;
            case 'deliveryCourier':
-                return TruckTick;
+                return undefined;
            default:
                return Box;
        }
    };

+    const getDeliveryMethodImage = (method: string) => {
+        if (method === 'deliveryCourier') {
+            return '/assets/images/fast-delivery.svg';
+        }
+        return undefined;
+    };
+
    const options = shipmentMethod?.data
        .filter((item: DeliveryMethod) => item.enabled)
        .sort((a: DeliveryMethod, b: DeliveryMethod) => a.order - b.order)
        .map((item: DeliveryMethod) => ({
            id: item.id,
            title: getDeliveryMethodTranslation(item.method),
-            icon: getDeliveryMethodIcon(item.method)
+            icon: getDeliveryMethodIcon(item.method),
+            imagePath: getDeliveryMethodImage(item.method)
        })) || [];

    return (
@@ -102,7 +102,7 @@ const MenuFilterDrawer = ({
            value={tempIngredients}
            onChange={handleIngredientsChange}
            placeholder={tMenu("MenuFilterDrawer.SelectContent.Placeholder") || "محتویات را وارد کنید..."}
-            className="w-full h-11 px-3 py-2.5 text-sm2 rounded-normal border border-border bg-container/29 focus:outline-none focus:ring-2 focus:ring-black"
+            className="w-full h-11 px-3 py-2.5 text-sm2 rounded-normal border border-border bg-container/29 focus:outline-none focus:ring-2 focus:ring-black text-xs!"
          />
        </div>
        <ComboBox
@@ -5,11 +5,13 @@ import { motion, Variants } from 'framer-motion';
 import { Icon, SearchNormal } from 'iconsax-react';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import Image from 'next/image';

 export interface ComboboxOption {
    id: string;
    title: string;
    icon?: Icon;
+    imagePath?: string;
    label?: string;
 }

@@ -64,7 +66,16 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
    const activeIcon = selectedOption?.icon && React.createElement(selectedOption.icon, {
        size: 16,
        className: "inline-block mr-1 stroke-primary"
-    })
+    });
+    const activeImage = selectedOption?.imagePath && (
+        <Image
+            src={selectedOption.imagePath}
+            alt=""
+            width={20}
+            height={20}
+            className="inline-block mr-1"
+        />
+    );


    const variants: Variants = {
@@ -117,7 +128,9 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI

                <div className="w-full text-sm2 flex items-center justify-start gap-3">
                    {
-                        activeIcon ? (
+                        activeImage ? (
+                            activeImage
+                        ) : activeIcon ? (
                            activeIcon
                        ) : (
                            Icon && <Icon size={16} className="inline-block mr-1 stroke-primary" />
@@ -171,7 +184,15 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
                                aria-selected
                            >
                                {
-                                    v?.icon && React.createElement(v.icon, {
+                                    v?.imagePath ? (
+                                        <Image
+                                            src={v.imagePath}
+                                            alt=""
+                                            width={16}
+                                            height={16}
+                                            className="inline-block mr-1"
+                                        />
+                                    ) : v?.icon && React.createElement(v.icon, {
                                        size: 16,
                                        className: "inline-block mr-1 stroke-primary"
                                    })
@@ -13,7 +13,7 @@ const BagIcon = (props: Props) => (
  >
    <path
      d="M7.5 8V7.03C7.5 4.78 9.31 2.57 11.56 2.36C14.24 2.1 16.5 4.21 16.5 6.84V8.22"
-      stroke="#8C90A3"
+      stroke="currentColor"
      strokeWidth={1.5}
      strokeMiterlimit={10}
      strokeLinecap="round"
@@ -21,7 +21,7 @@ const BagIcon = (props: Props) => (
    />
    <path
      d="M8.99983 21H14.9998C19.0198 21 19.7398 19.39 19.9498 17.43L20.6998 11.43C20.9698 8.99 20.2698 7 15.9998 7H7.99983C3.72983 7 3.02983 8.99 3.29983 11.43L4.04983 17.43C4.25983 19.39 4.97983 21 8.99983 21Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
      strokeWidth={1.5}
      strokeMiterlimit={10}
      strokeLinecap="round"
@@ -13,7 +13,7 @@ const HeartIcon = (props: Props) => (
  >
    <path
      d="M12.62 20.8101C12.28 20.9301 11.72 20.9301 11.38 20.8101C8.48 19.8201 2 15.6901 2 8.6901C2 5.6001 4.49 3.1001 7.56 3.1001C9.38 3.1001 10.99 3.9801 12 5.3401C13.01 3.9801 14.63 3.1001 16.44 3.1001C19.51 3.1001 22 5.6001 22 8.6901C22 15.6901 15.52 19.8201 12.62 20.8101Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
@@ -13,28 +13,28 @@ const PagerIcon = (props: Props) => (
  >
    <path
      d="M18.9702 22H4.97021C1.97021 22 1.97021 20.65 1.97021 19V18C1.97021 17.45 2.42021 17 2.97021 17H20.9702C21.5202 17 21.9702 17.45 21.9702 18V19C21.9702 20.65 21.9702 22 18.9702 22Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M20.72 13V17H3.27002V13C3.27002 9.16 5.98002 5.95 9.59002 5.18C10.13 5.06 10.69 5 11.27 5H12.72C13.3 5 13.87 5.06 14.41 5.18C18.02 5.96 20.72 9.16 20.72 13Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M14.5 4.5C14.5 4.74 14.47 4.96 14.41 5.18C13.87 5.06 13.3 5 12.72 5H11.27C10.69 5 10.13 5.06 9.59 5.18C9.53 4.96 9.5 4.74 9.5 4.5C9.5 3.12 10.62 2 12 2C13.38 2 14.5 3.12 14.5 4.5Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M15 11H9"
-      stroke="#8C90A3"
+      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
@@ -84,10 +84,10 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
              {onPagerClick ? (
                <button
                  onClick={onPagerClick}
-                  className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary"
+                  className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary dark:text-white dark:**:stroke-white"
                >
                  <PagerIcon width={20} height={20} />
-                  <span className="text-xs2">
+                  <span className="text-xs2 dark:text-white">
                    {t('Pager')}
                  </span>
                </button>
@@ -99,7 +99,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
                icon={
                  <HomeIcon
                    className={clsx(
-                      'transition-all duration-200 stroke-primary'
+                      'transition-all duration-200 stroke-primary dark:stroke-white dark:text-white'
                    )}
                    fill="white"
                    stroke="currentColor"
@@ -110,10 +110,10 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
              <Link
                href={`/${name}/about`}
                className={clsx(
-                  'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0'
+                  'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0 dark:text-white dark:**:stroke-white'
                )}
              >
-                <div className="shrink-0 text-primary">
+                <div className="shrink-0 text-primary dark:text-white">
                  <Building
                    key={`building-${buildingVariant}-${isAboutRoute}`}
                    size={20}
@@ -122,7 +122,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
                    className='stroke-0'
                  />
                </div>
-                <span className="text-xs2 text-center truncate w-full">
+                <span className="text-xs2 text-center truncate w-full dark:text-white">
                  {t('about')}
                </span>
              </Link>
@@ -17,7 +17,7 @@ function BottomNavLink({ icon, value, href, ...restProps }: Props) {

  return (
    <Link {...restProps} href={href} className={clsx(
-      'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0',
+      'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0 dark:text-white dark:**:stroke-white',
      isActive && 'text-primary-foreground **:stroke-primary-foreground',
      restProps.className ?? '',
    )}>
@@ -25,7 +25,7 @@ function BottomNavLink({ icon, value, href, ...restProps }: Props) {
        {icon}
      </div>
      <span className={clsx(
-        'text-xs2 text-center truncate w-full',
+        'text-xs2 text-center truncate w-full dark:text-white',
      )}>
        {value}
      </span>
@@ -25,7 +25,7 @@ function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
      )}>
        {icon}
      </div>
-      <span className="text-xs2">
+      <span className="text-xs2 dark:text-white">
        {value}
      </span>
    </Link>