chore: a responsive menu has been created in collections

Franqsanz · Dec 17, 2024 · da8e28f · da8e28f
1 parent 89411c3
commit da8e28f
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 61 deletions.
diff --git a/src/components/nav/menu/MenuProfile.tsx b/src/components/nav/menu/MenuProfile.tsx
@@ -11,6 +11,7 @@ import {
   MenuItem,
   MenuGroup,
   MenuDivider,
+  Tag,
 } from '@chakra-ui/react';
 
 import { useAccountActions } from '@hooks/useAccountActions';
@@ -61,14 +62,20 @@ export function MenuProfile({ displayName, photoURL, username }: MenuType) {
             to='/my-collections'
             _hover={{ textDecoration: 'none' }}
           >
-            Mis colecciones
+            Mis colecciones{' '}
+            <Tag ml='2' fontSize='xs' colorScheme='green'>
+              Nuevo 😮
+            </Tag>
           </MenuItem>
           <MenuItem
             as={NavLink}
             to='/my-favorites'
             _hover={{ textDecoration: 'none' }}
           >
-            Mis favoritos
+            Mis favoritos{' '}
+            <Tag ml='2' fontSize='xs' colorScheme='green'>
+              Nuevo 😮
+            </Tag>
           </MenuItem>
           <MenuItem
             as={NavLink}

diff --git a/src/components/skeletons/SkeletonDCollection.tsx b/src/components/skeletons/SkeletonDCollection.tsx
@@ -17,10 +17,16 @@ export function SkeletonDCollection() {
           align='center'
         >
           <Skeleton w='100px' h='30px' rounded='lg' />
-          <Flex gap='3' mr='3'>
+          <Flex display={{ base: 'none', sm: 'flex' }} gap='3' mr='3'>
             <Skeleton w='140px' h='30px' rounded='lg' />
             <Skeleton w='150px' h='30px' rounded='lg' />
           </Flex>
+          <Skeleton
+            display={{ base: 'block', sm: 'none' }}
+            w='32px'
+            h='32px'
+            rounded='lg'
+          />
         </Flex>
       </Flex>
       <SkeletonContainer />

diff --git a/src/components/ui/MySimpleGrid.tsx b/src/components/ui/MySimpleGrid.tsx
@@ -3,7 +3,7 @@ import { SimpleGrid, useColorModeValue } from '@chakra-ui/react';
 
 interface SimpleGridType {
   width?: string;
-  gap?: number;
+  gap?: number | object;
   children: React.ReactNode;
 }
 

diff --git a/src/pages/Favorites.tsx → src/pages/profile/Favorites.tsx b/src/pages/Favorites.tsx → src/pages/profile/Favorites.tsx
diff --git a/src/pages/profile/collections/AllCollections.tsx b/src/pages/profile/collections/AllCollections.tsx
@@ -67,68 +67,74 @@ export function AllCollections() {
     );
   } else {
     collectionsUI = (
-      <MySimpleGrid gap={5}>
-        {data?.collections.map(({ id, name, createdAt }) => (
-          <>
-            <Flex
-              w={{ base: 'full', md: '250px' }}
-              h={{ base: '200px', sm: '210px' }}
-              boxShadow='xl'
-              border='1px solid #A0AEC0'
-              rounded='lg'
-              direction='column'
-              justifyContent={{ base: 'space-between', md: 'flex-start' }}
-              justify='center'
-              position='relative'
-            >
-              <Flex w='full' justify='flex-end'>
-                <MenuCollections id={id} name={name} refetch={refetch} />
-              </Flex>
-              <Flex w='full' direction='column' textAlign='center' gap='3'>
-                <Box mb='4'>
-                  <Box mb='1' fontSize={{ base: 'sm', md: 'lg' }}>
-                    {name}
-                  </Box>
-                  <Box fontSize={{ base: '9px', sm: '10px' }}>
-                    {parseDate(createdAt)}
+      <MySimpleGrid gap={{ base: 3, sm: 5 }}>
+        {data?.collections
+          .sort(
+            (a, b) =>
+              new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+          )
+          .map(({ id, name, createdAt }) => (
+            <>
+              <Flex
+                key={id}
+                w={{ base: 'full', md: '250px' }}
+                h={{ base: '200px', sm: '210px' }}
+                boxShadow='xl'
+                border='1px solid #A0AEC0'
+                rounded='lg'
+                direction='column'
+                justifyContent={{ base: 'space-between', md: 'flex-start' }}
+                justify='center'
+                position='relative'
+              >
+                <Flex w='full' justify='flex-end'>
+                  <MenuCollections id={id} name={name} refetch={refetch} />
+                </Flex>
+                <Flex w='full' direction='column' textAlign='center' gap='3'>
+                  <Box mb='4'>
+                    <Box mb='1' fontSize={{ base: 'xs', sm: 'lg' }}>
+                      {name}
+                    </Box>
+                    <Box fontSize={{ base: '9px', sm: '10px' }}>
+                      {parseDate(createdAt)}
+                    </Box>
                   </Box>
-                </Box>
-                <Link
-                  as={NavLink}
-                  to={`/my-collections/collection/${id}`}
-                  w='full'
-                  bg={bgRandomBookCardLink}
-                  py='4'
-                  px='7'
-                  color={colorLink}
-                  position={{ base: 'initial', md: 'absolute' }}
-                  bottom='0'
-                  roundedBottom='lg'
-                  tabIndex={-1}
-                  _hover={{ outline: 'none' }}
-                >
-                  <Flex
-                    align='center'
-                    justify={{ base: 'center', md: 'flex-start' }}
-                    fontSize={{ base: 'sm', md: 'md' }}
+                  <Link
+                    as={NavLink}
+                    to={`/my-collections/collection/${id}`}
+                    w='full'
+                    bg={bgRandomBookCardLink}
+                    py='4'
+                    px='7'
+                    color={colorLink}
+                    position={{ base: 'initial', md: 'absolute' }}
+                    bottom='0'
+                    roundedBottom='lg'
+                    tabIndex={-1}
+                    _hover={{ outline: 'none' }}
                   >
-                    Abrir
-                    <Icon as={FiArrowRight} ml='2' />
-                  </Flex>
-                </Link>
+                    <Flex
+                      align='center'
+                      justify={{ base: 'center', md: 'flex-start' }}
+                      fontSize={{ base: 'sm', md: 'md' }}
+                    >
+                      Abrir
+                      <Icon as={FiArrowRight} ml='2' />
+                    </Flex>
+                  </Link>
+                </Flex>
               </Flex>
-            </Flex>
-          </>
-        ))}
+            </>
+          ))}
       </MySimpleGrid>
     );
   }
 
   return (
     <>
+      <ScrollRestoration />
       <MainHead title='Mis colecciones | XBuniverse' />
       <ContainerTitle title='Mis colecciones' />
-      <ScrollRestoration />
       <ModalCollection
         title='Crear colección'
         textButton='Crear'

diff --git a/src/pages/profile/collections/CollectionDetail.tsx b/src/pages/profile/collections/CollectionDetail.tsx
@@ -13,7 +13,15 @@ import {
   Image,
   Link,
   useDisclosure,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
 } from '@chakra-ui/react';
+import { MdOutlineExplore } from 'react-icons/md';
+import { FiArrowLeft, FiMoreVertical } from 'react-icons/fi';
+import { FaCheckCircle } from 'react-icons/fa';
 
 import { useCollectionDetail, useDeleteCollections } from '@hooks/queries';
 import { MainHead } from '@components/layout/Head';
@@ -23,11 +31,8 @@ import { MySimpleGrid } from '@components/ui/MySimpleGrid';
 import { NoData } from '@assets/assets';
 import { MyContainer } from '@components/ui/MyContainer';
 import { useAuth } from '@contexts/AuthContext';
-import { MdOutlineExplore } from 'react-icons/md';
-import { FiArrowLeft } from 'react-icons/fi';
 import { SkeletonDCollection } from '@components/skeletons/SkeletonDCollection';
 import { useMyToast } from '@hooks/useMyToast';
-import { FaCheckCircle } from 'react-icons/fa';
 import { ModalCollection } from '@components/modals/ModalCollection';
 import { ModalConfirmation } from '@components/modals/ModalConfirmation';
 
@@ -157,9 +162,9 @@ export function CollectionDetail() {
 
   return (
     <>
+      <ScrollRestoration />
       <MainHead title={`${data?.name} | Mis colecciones | XBuniverse`} />
       <ContainerTitle title={data?.name} />
-      <ScrollRestoration />
       <ModalCollection
         title='Editar colección'
         textButton='Guardar'
@@ -194,7 +199,7 @@ export function CollectionDetail() {
               Volver
             </Flex>
           </Button>
-          <Flex gap='3'>
+          <Flex display={{ base: 'none', sm: 'flex' }} gap='3'>
             <Button
               onClick={onOpenEdit}
               size='sm'
@@ -214,6 +219,24 @@ export function CollectionDetail() {
               Eliminar colección
             </Button>
           </Flex>
+          <Box display={{ base: 'block', sm: 'none' }}>
+            <Menu>
+              <MenuButton
+                as={IconButton}
+                aria-label='Options'
+                icon={<FiMoreVertical />}
+                size='sm'
+              />
+              <MenuList p='0' fontSize='sm'>
+                <MenuItem p='2' onClick={onOpenEdit}>
+                  Editar nombre
+                </MenuItem>
+                <MenuItem p='2' onClick={onOpenDelete}>
+                  Eliminar colección
+                </MenuItem>
+              </MenuList>
+            </Menu>
+          </Box>
         </Flex>
       </Flex>
       <MyContainer>{asideAndCardsUI}</MyContainer>

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -23,7 +23,7 @@ const MostViewed = lazy(() => import('@pages/MostViewed'));
 const Book = lazy(() => import('@pages/Book'));
 const FilteredData = lazy(() => import('@pages/FilteredData'));
 const NewBook = lazy(() => import('@pages/NewBook'));
-const Favorites = lazy(() => import('@pages/Favorites'));
+const Favorites = lazy(() => import('@pages/profile/Favorites'));
 
 export const routes = createBrowserRouter([
   {