chore: added new component

src/components/BooksSection.tsx

@@ -0,0 +1,41 @@
+import React, { Suspense } from 'react';
+import { Box, Flex, Divider, Spinner } from '@chakra-ui/react';
+
+import { BooksSectionType } from './types';
+
+export function BooksSection({
+  title,
+  data,
+  booksComponent,
+}: BooksSectionType) {
+  return (
+    <>
+      <Box my='10'>
+        <Divider borderColor='gray.400' />
+      </Box>
+      <Flex direction='column'>
+        <Box
+          p='2'
+          mb='3'
+          fontSize={{ base: 'xl', md: '2xl' }}
+          textAlign={{ base: 'center', lg: 'left' }}
+          ml={{ base: 0, lg: 2 }}
+        >
+          {title}{' '}
+          <Box as='span' fontWeight='semibold'>
+            {data}
+          </Box>
+        </Box>
+        <Suspense
+          fallback={
+            <Box p='3'>
+              <Spinner size='lg' />
+            </Box>
+          }
+        >
+          <Box>{booksComponent}</Box>
+        </Suspense>
+      </Flex>
+    </>
+  );
+}

src/components/types.d.ts

@@ -139,6 +139,12 @@ interface SkeletonType {
   showTags?: boolean;
 }
 
+interface BooksSectionType {
+  title: string;
+  data?: string;
+  booksComponent: RNode;
+}
+
 export type {
   LinkType,
   SelectBooksType,
@@ -148,6 +154,7 @@ export type {
   HeadType,
   TagType,
   BookType,
+  BooksSectionType,
   ModalCroppType,
   ModalCropperType,
   ModalType,

src/pages/Book.tsx

@@ -23,6 +23,7 @@ import { MainHead } from '../components/Head';
 import { MyTag } from '../components/MyTag';
 import { ModalShare } from '../components/ModalShare';
 import { MyLink } from '../components/MyLink';
+import { BooksSection } from '../components/BooksSection';
 
 const Categories = lazy(() => import('../components/Categories'));
 const MoreBooksAuthors = lazy(
@@ -298,87 +299,24 @@ export default function Book() {
             shareUrl={shareUrl}
             data={data.title}
           />
-          <Box my='10'>
-            <Divider borderColor='gray.400' />
-          </Box>
-          <Flex direction='column'>
-            <Box
-              p='2'
-              mb='3'
-              fontSize={{ base: 'xl', md: '2xl' }}
-              textAlign={{ base: 'center', lg: 'left' }}
-              ml={{ base: 0, lg: 2 }}
-            >
-              Más libros del autor{' '}
-              <Box as='span' fontWeight='semibold'>
-                {data.authors[0]}
-              </Box>
-            </Box>
-            <Suspense
-              fallback={
-                <Box p='3'>
-                  <Spinner size='lg' />
-                </Box>
-              }
-            >
-              <Box>
-                <MoreBooksAuthors id={data.id} currentBookId={pathUrl} />
-              </Box>
-            </Suspense>
-          </Flex>
-          <Box my='10'>
-            <Divider borderColor='gray.400' />
-          </Box>
-          <Flex direction='column'>
-            <Box
-              p='2'
-              mb='3'
-              fontSize={{ base: 'xl', md: '2xl' }}
-              textAlign={{ base: 'center', lg: 'left' }}
-              ml={{ base: 0, lg: 2 }}
-            >
-              Libros relacionados con{' '}
-              <Box as='span' fontWeight='semibold'>
-                {data.category[0]}
-              </Box>
-            </Box>
-            <Suspense
-              fallback={
-                <Box p='3'>
-                  <Spinner size='lg' />
-                </Box>
-              }
-            >
-              <Box>
-                <RelatedBooks id={data.id} currentBookId={pathUrl} />
-              </Box>
-            </Suspense>
-          </Flex>
-          <Box my='10'>
-            <Divider borderColor='gray.400' />
-          </Box>
-          <Flex direction='column'>
-            <Box
-              p='2'
-              mb='3'
-              fontSize={{ base: 'xl', md: '2xl' }}
-              textAlign={{ base: 'center', lg: 'left' }}
-              ml={{ base: 0, lg: 2 }}
-            >
-              Más libros en XBuniverse
-            </Box>
-            <Suspense
-              fallback={
-                <Box p='3'>
-                  <Spinner size='lg' />
-                </Box>
-              }
-            >
-              <Box>
-                <MoreBooks currentBookId={pathUrl} />
-              </Box>
-            </Suspense>
-          </Flex>
+          <BooksSection
+            title='Más libros del autor'
+            data={data.authors[0]}
+            booksComponent={
+              <MoreBooksAuthors id={data.id} currentBookId={pathUrl} />
+            }
+          />
+          <BooksSection
+            title='Libros relacionados con'
+            data={data.category[0]}
+            booksComponent={
+              <RelatedBooks id={data.id} currentBookId={pathUrl} />
+            }
+          />
+          <BooksSection
+            title='Más libros en XBuniverse'
+            booksComponent={<MoreBooks currentBookId={pathUrl} />}
+          />
         </Flex>
         <Flex
           display={{ base: 'none', lg: 'block' }}