adjust cart

ethereumfollowprotocol · Nov 28, 2024 · bdf3e46 · bdf3e46
1 parent a480123
commit bdf3e46
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/src/app/cart/components/cart-items/cart-items-list.tsx b/src/app/cart/components/cart-items/cart-items-list.tsx
@@ -12,6 +12,7 @@ import SocialProfilesItem, {
 } from '#/components/profile-list/components/social-profiles-item'
 import LoadingRow from '#/components/profile-list/components/list-item/loading-list-item'
 import ProfileListItem from '#/components/profile-list/components/list-item/profile-list-item'
+import ProfileList from '#/components/profile-list'
 
 export interface ProfileListProfile {
   address: Address
@@ -104,7 +105,7 @@ const CartItemsList: React.FC<CartItemsListProps> = ({
           {socialProfiles?.map(social => (
             <SocialProfilesItem key={social.platform} {...social} />
           ))}
-          {(profiles?.length || 0) > 0 && (
+          {(profiles?.length || 0) >= 30 ? (
             <List
               ref={listRef}
               autoWidth={true}
@@ -138,6 +139,12 @@ const CartItemsList: React.FC<CartItemsListProps> = ({
                 )
               }}
             />
+          ) : (
+            <ProfileList
+              profiles={profiles}
+              isLoading={isLoading}
+              className='gap-4 2xl:gap-5 pb-4'
+            />
           )}
         </>
       )}

diff --git a/src/app/cart/components/cart.tsx b/src/app/cart/components/cart.tsx
@@ -62,9 +62,11 @@ const Cart = () => {
       ) : (
         <div
           ref={containerRef}
-          className='flex flex-col-reverse xl:flex-row overflow-y-auto justify-center gap-4 w-full h-full xl:gap-6 pt-[6.75rem] px-2 lg:px-8 pb-6 xl:pb-0'
+          className={cn(
+            'flex flex-col-reverse xl:flex-row overflow-y-auto justify-center gap-4 w-full h-full xl:gap-6 pt-[6.75rem] px-2 lg:px-8 pb-6 xl:pb-8',
+            totalCartItems >= 30 && 'xl:pb-0'
+          )}
           onScroll={e => {
-            // onScrollCartItems(e);
             onScrollSidebar(e)
           }}
         >
@@ -73,7 +75,10 @@ const Cart = () => {
           )}
           {clearCartModalOpen && <ClearCartModal closeModal={() => setClearCartModalOpen(false)} />}
           <div
-            className='flex flex-col mb-6 xl:sticky glass-card gap-4 px-1 py-4 h-fit rounded-2xl border-[3px] border-grey xl:max-w-[600px] w-full xl:w-1/3'
+            className={cn(
+              'flex flex-col mb-6 glass-card gap-4 px-1 py-4 h-fit rounded-2xl border-[3px] border-grey xl:max-w-[600px] w-full xl:w-1/3',
+              totalCartItems > 30 && 'xl:sticky'
+            )}
             ref={SidebarRef}
           >
             <div className='w-full flex justify-between items-center px-3 sm:px-5 pt-2'>
@@ -90,24 +95,16 @@ const Cart = () => {
                     setSelectedPlatform('farcaster')
                   }}
                 />
-                {/* <Image
-                  src={LensIcon}
-                  alt='Import from Lens'
-                  width={30}
-                  className='cursor-pointer rounded-lg hover:opacity-75 hover:scale-110 transition-all'
-                  onClick={() => {
-                    setImportModalOpen(true)
-                    setSelectedPlatform('lens')
-                  }}
-                /> */}
               </div>
             </div>
             <Search size='w-full z-50 px-2 sm:px-4 pt-2' isEditor={true} />
             <Recommendations header={t('recommendations')} endpoint='recommended' limit={30} />
           </div>
           <div
-            className='flex flex-col h-fit xl:sticky relative top-0  w-full xl:w-2/3'
-            // ref={CartItemsRef}
+            className={cn(
+              'flex flex-col h-fit relative top-0  w-full xl:w-2/3',
+              totalCartItems >= 30 && 'xl:sticky'
+            )}
           >
             <Suspense
               fallback={
@@ -129,11 +126,11 @@ const Cart = () => {
           {isClient && (
             <div
               className={cn(
-                'fixed md:w-fit w-full bottom-4 sm:bottom-[3vh] right-0 px-2 sm:px-4 lg:right-[3vw] justify-end',
+                'fixed md:w-fit w-full -bottom-1 lg:bottom-[3vh] right-0 lg:right-[3vw] justify-end',
                 isClient && totalCartItems > 0 ? 'flex' : 'hidden'
               )}
             >
-              <div className='flex gap-1 xxs:gap-2 md:gap-6 w-full border-[3px] border-grey lg:w-fit items-center px-3 py-4 sm:p-4 bg-white/10 justify-between glass-card bg-opacity-50 shadow-xl rounded-xl'>
+              <div className='flex gap-1 xxs:gap-2 md:gap-6 w-full border-[3px] border-b-0 md:border-b-[3px] bg-neutral/50 border-grey lg:w-fit items-center px-3 py-4 sm:p-4 justify-between glass-card bg-opacity-50 shadow-xl rounded-t-xl md:rounded-b-xl'>
                 <div className='flex flex-col gap-1 items-start'>
                   <div className='flex gap-2 items-center'>
                     <p className='text-4xl 3xs:text-5xl sm:text-6xl font-bold'>

diff --git a/src/components/navigation/mobile.tsx b/src/components/navigation/mobile.tsx
@@ -1,14 +1,22 @@
 import React from 'react'
 import { useAccount } from 'wagmi'
+import { usePathname } from 'next/navigation'
 
 import NavItems from './components/nav-items'
 import CartButton from './components/cart-button'
+import { cn } from '#/lib/utilities'
 
 const Mobile: React.FC = () => {
+  const pathname = usePathname()
   const { address: userAddress } = useAccount()
 
   return (
-    <nav className='fixed mx-auto bottom-4 z-50 flex justify-center w-full lg:hidden'>
+    <nav
+      className={cn(
+        'fixed mx-auto bottom-6 z-50 flex justify-center w-full lg:hidden',
+        pathname === '/cart' && 'bottom-32'
+      )}
+    >
       <div className='flex items-center gap-1.5'>
         <NavItems />
         {userAddress && <CartButton />}

diff --git a/src/components/profile-list/index.tsx b/src/components/profile-list/index.tsx
@@ -14,6 +14,7 @@ export interface ProfileListProfile {
 }
 
 interface ProfileListProps {
+  className?: string
   profiles?: ProfileListProfile[]
   showFollowsYouBadges?: boolean // Handle showing "Follows you" badges in the ProfileList
   showTags?: boolean
@@ -26,6 +27,7 @@ interface ProfileListProps {
 }
 
 const ProfileList: React.FC<ProfileListProps> = ({
+  className,
   profiles,
   showFollowsYouBadges,
   showTags,
@@ -44,7 +46,8 @@ const ProfileList: React.FC<ProfileListProps> = ({
     <div
       className={cn(
         'flex flex-col w-full gap-2 2xl:gap-3',
-        !isEmpty && isShortList && showTags && canEditTags ? 'pb-32' : 'pb-0'
+        !isEmpty && isShortList && showTags && canEditTags ? 'pb-32' : 'pb-0',
+        className
       )}
     >
       {profiles?.map(({ address, tags, ens, counts }, index) => (