fix: the space between categories and authors with ,

Franqsanz · Nov 13, 2023 · 0b63f47 · 0b63f47 · vercel · Nov 13, 2023
1 parent bb32fa6
commit 0b63f47
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 25 deletions.
diff --git a/src/components/MyLink.tsx b/src/components/MyLink.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { Box, Flex, Link, useColorModeValue } from '@chakra-ui/react';
+import { Box, Link, useColorModeValue } from '@chakra-ui/react';
 
 import { MyLinkType } from './types';
 
@@ -22,7 +22,7 @@ export function MyLink({ data, href, external, index }: MyLinkType) {
       >
         {data}
       </Link>
-      <Box mx='2'>{index || null}</Box>
+      {index !== null && index !== undefined && <Box mr='1'>{index}</Box>}
     </>
   );
 }
diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -178,14 +178,15 @@ export default function Book() {
             my='1'
             fontSize={{ base: 'md', md: 'xl' }}
             textTransform='uppercase'
+            flexWrap='wrap'
           >
             {data.authors.map((author, index) => (
               <MyLink
                 external={true}
                 key={index}
                 href={`https://www.google.com/search?q=${author}+escritor`}
                 data={author}
-                index={index !== data.authors.length - 1 && ' & '}
+                index={index !== data.authors.length - 1 && ','}
               />
             ))}
           </Flex>
@@ -203,25 +204,7 @@ export default function Book() {
           <Box bg={bgGrayCategory} p='4' roundedBottom='lg'>
             <Flex direction='column'>
               <Box>
-                <Flex>
-                  <Box minW='160px'>
-                    <Box as='span'>Autor(s):</Box>
-                  </Box>
-                  <Box>
-                    <Flex as='span'>
-                      {data.authors.map((author, index) => (
-                        <MyLink
-                          external={true}
-                          key={index}
-                          href={`https://www.google.com/search?q=${author}+escritor`}
-                          data={author}
-                          index={index !== data.authors.length - 1 && ' & '}
-                        />
-                      ))}
-                    </Flex>
-                  </Box>
-                </Flex>
-                <Flex my='2'>
+                <Flex mt='0' mb='2'>
                   <Box minW='160px'>
                     <Box as='span'>Año:</Box>
                   </Box>
@@ -270,17 +253,17 @@ export default function Book() {
                     <Box as='span'>Categoria(s):</Box>
                   </Box>
                   <Box>
-                    <Box as='span'>
+                    <Flex flexWrap='wrap' as='span'>
                       {data.category.map((category, index) => (
                         <MyLink
                           external={false}
                           key={index}
                           href={`/books/search/category/${category}`}
                           data={category}
-                          index={index !== data.category.length - 1 && ', '}
+                          index={index !== data.category.length - 1 && ','}
                         />
                       ))}
-                    </Box>
+                    </Flex>
                   </Box>
                 </Flex>
               </Box>