show cart summary section

src/app/[name]/(Dialogs)/cart/components/CartSummary.tsx

@@ -8,7 +8,6 @@ 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 { Add, Minus } from 'iconsax-react';
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
 
 interface CartSummaryProps {

src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx

@@ -13,6 +13,7 @@ import { useGetCartItems } from '@/app/[name]/(Dialogs)/cart/hooks/useCartData';
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
 import { useCallback, useMemo } from 'react';
 import { useGetShipmentMethod } from '../../hooks/useOrderData';
+import CartItemsList from '@/app/[name]/(Dialogs)/cart/components/CartItemsList';
 
 type SummarySectionProps = {
     cartModal: boolean;
@@ -125,8 +126,11 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
                 title={t("CartModal.Title")}
                 visible={cartModal}
                 onClick={onToggleCartModal}
+                titlePadding='ps-5 pe-5'
             >
-                <div></div>
+                <div className='overflow-y-auto noscrollbar px-4 mt-4' dir='rtl'>
+                    <CartItemsList />
+                </div>
             </AnimatedBottomSheet>
         </>
     );

src/components/bottomsheet/AnimatedBottomSheet.tsx

@@ -12,9 +12,10 @@ type Props = {
     showTitle?: boolean,
     blurOpacity?: string | number | null,
     overrideClassName?: string,
+    titlePadding?: string,
 } & BlurredOverlayContainerProps
 
-const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTitle = true, showCloseButton = true, ...props }: Props) => {
+const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTitle = true, showCloseButton = true, titlePadding = 'ps-[31px] pe-[33px]', ...props }: Props) => {
     const closeRef: React.Ref<HTMLDivElement> | undefined = useRef(null);
 
     const variants: Variants = {
@@ -59,7 +60,7 @@ const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTit
                 animate={props.visible ? 'visible' : 'hidden'}
                 variants={variants}
             >
-                <div className="ps-[31px] pe-[33px] flex justify-between">
+                <div className={clsx(titlePadding, 'flex justify-between')}>
                     {showTitle &&
                         <div className='text-lg font-medium text-foreground leading-8 mt-2.5'>
                             {props.title}