chore: the size of the flex that contains the books has been modified

Franqsanz · Aug 12, 2024 · 4d05afe · 4d05afe
1 parent d6a067a
commit 4d05afe
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 28 deletions.
diff --git a/src/components/AllBooks.tsx b/src/components/AllBooks.tsx
@@ -82,7 +82,7 @@ export function AllBooks() {
       <Flex
         as='article'
         direction={{ base: 'column', md: 'row' }}
-        maxW='1900px'
+        maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'
         px={{ base: 5, md: 10, '2xl': 16 }}
       >

diff --git a/src/components/cards/Card.tsx b/src/components/cards/Card.tsx
@@ -36,7 +36,7 @@ export function Card({
 
   return (
     <>
-      <LinkBox mx='1' my='5' pb='4' zIndex='0'>
+      <LinkBox mx='1' mt='5' mb='2' zIndex='0'>
         <LinkOverlay
           as={NavLink}
           to={`/book/view/${pathUrl}`}

diff --git a/src/pages/MostViewed.tsx b/src/pages/MostViewed.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Flex } from '@chakra-ui/react';
 
 import { MainHead } from '@components/Head';
 import { ContainerTitle } from '@components/ContainerTitle';
@@ -16,31 +17,37 @@ export default function MostViewed() {
       <MainHead title='Top 10 Más Vistos | XBuniverse' />
       <ContainerTitle title='Top 10 Más Vistos' />
       <MySliderCategories />
-      <MySimpleGrid width='6xl'>
-        {data?.map(
-          ({
-            id,
-            category,
-            title,
-            language,
-            authors,
-            pathUrl,
-            image,
-          }: CardType) => (
-            <>
-              <Card
-                id={id}
-                category={category}
-                title={title}
-                authors={authors}
-                language={language}
-                pathUrl={pathUrl}
-                image={image}
-              />
-            </>
-          ),
-        )}
-      </MySimpleGrid>
+      <Flex
+        maxW={{ base: '1070px', '2xl': '1280px' }}
+        m='0 auto'
+        px={{ base: 5, md: 10, '2xl': 16 }}
+      >
+        <MySimpleGrid>
+          {data?.map(
+            ({
+              id,
+              category,
+              title,
+              language,
+              authors,
+              pathUrl,
+              image,
+            }: CardType) => (
+              <>
+                <Card
+                  id={id}
+                  category={category}
+                  title={title}
+                  authors={authors}
+                  language={language}
+                  pathUrl={pathUrl}
+                  image={image}
+                />
+              </>
+            ),
+          )}
+        </MySimpleGrid>
+      </Flex>
     </>
   );
 }
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -272,7 +272,7 @@ export default function Search() {
       />
       <Flex
         direction={{ base: 'column', md: 'row' }}
-        maxW='1700px'
+        maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'
         px={{ base: 5, md: 10, '2xl': 16 }}
       >