feat: the filter area was redesigned and more types of filtering were…

… added

src/components/aside/AboutCategories.tsx

@@ -19,11 +19,11 @@ export function AboutCategories({ category }: any) {
             mt='2'
             fontSize='sm'
             maxH='250px'
-            overflow='auto'
+            overflowY='scroll'
             pr='1'
             sx={{
               '&::-webkit-scrollbar': {
-                width: '7px',
+                width: '5px',
               },
               '&::-webkit-scrollbar-thumb': {
                 background: '#a2aab3',

src/components/filters/FilterNumberPages.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Flex, Input, useColorModeValue } from '@chakra-ui/react';
+
+interface FilterNumberTypes {
+  min: string | undefined;
+  max: string | undefined;
+  setMin: React.ChangeEventHandler<HTMLInputElement>;
+  setMax: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+export function FilterNumberPages({ min, max, setMin, setMax }: FilterNumberTypes) {
+  const bgInput = useColorModeValue('gray.100', 'black');
+  const colorInput = useColorModeValue('gray.900', 'gray.100');
+
+  return (
+    <>
+      <Flex mb='1' gap='2' align='center'>
+        <Input
+          type='number'
+          bg={bgInput}
+          border='1px solid black'
+          size='sm'
+          rounded='md'
+          color={colorInput}
+          placeholder='Mínimo'
+          value={min}
+          onChange={setMin}
+          _placeholder={{ color: `${colorInput}`, fontSize: 'xs' }}
+          _hover={{ outline: 'none' }}
+          _focus={{ bg: 'transparent' }}
+        />
+        <Input
+          type='number'
+          bg={bgInput}
+          border='1px solid black'
+          size='sm'
+          rounded='md'
+          color={colorInput}
+          placeholder='Máximo'
+          value={max}
+          onChange={setMax}
+          _placeholder={{ color: `${colorInput}`, fontSize: 'xs' }}
+          _hover={{ outline: 'none' }}
+          _focus={{ bg: 'transparent' }}
+        />
+      </Flex>
+    </>
+  );
+}

src/components/ui/MyContainer.tsx

@@ -6,6 +6,7 @@ export function MyContainer({ children }: { children: React.ReactNode }) {
     <>
       <Flex
         as='article'
+        w='full'
         direction={{ base: 'column', md: 'row' }}
         maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'

src/pages/Book.tsx

@@ -427,7 +427,7 @@ export default function Book() {
                 </Flex>
                 <Flex>
                   <Box minW='160px'>
-                    <Box as='span'>N° paginas:</Box>
+                    <Box as='span'>N° páginas:</Box>
                   </Box>
                   <Box>
                     <Box as='span'>{bookObject.numberPages}</Box>