refactor: the filter section is being refactored

src/components/filters/FilterAccordion.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+} from '@chakra-ui/react';
+
+import { getAccordionItems } from '@components/filters/FilterOptions';
+
+export function FilterAccordion(props) {
+  const accordionItems = getAccordionItems(props);
+
+  return (
+    <>
+      <Accordion allowToggle mb='2'>
+        {accordionItems.map(({ title, content }, index) => (
+          <AccordionItem border='none' key={index}>
+            <h2>
+              <AccordionButton px='1' borderRadius='md'>
+                <Box as='span' pl='1' flex='1' textAlign='left'>
+                  {title}
+                </Box>
+                <AccordionIcon />
+              </AccordionButton>
+            </h2>
+            <AccordionPanel pb='3' p='3'>
+              {content}
+            </AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </>
+  );
+}

src/components/filters/FilterDrawer.tsx

@@ -16,6 +16,7 @@ import {
 } from '@chakra-ui/react';
 
 import { DrawerType } from '@components/types';
+// import { FilterAccordion } from '@components/filters/FilterAccordion';
 
 export function FilterDrawer({
   isOpen,
@@ -52,16 +53,34 @@ export function FilterDrawer({
       <Drawer isOpen={isOpen} placement='bottom' onClose={onClose} size='xl'>
         <DrawerOverlay bg='#1212126e' />
         <DrawerContent
+          m='0 auto'
+          w='95%'
           bg={bgDrawer}
           backdropFilter='auto'
           backdropBlur='12px'
           roundedTop='3xl'
-          maxH='450px'
-          borderTop='1px solid #A0AEC0'
+          border='1px solid #A0AEC0'
+          borderBottom='0'
         >
           <DrawerHeader>Filtrar por:</DrawerHeader>
           <DrawerCloseButton />
           <DrawerBody>
+            {/* <FilterAccordion
+              selectedMinPages=''
+              selectedMaxPages=''
+              handleMinChange=''
+              handleMaxChange=''
+              selectedLanguage={selectedLanguage}
+              handleLanguageChange={handleLanguageChange}
+              languages=''
+              selectedYear={selectedYear}
+              handleYearChange={handleYearChange}
+              years=''
+              selectedAuthor=''
+              handleAuthorChange=''
+              authors=''
+            /> */}
+
             <Flex px='2' direction='column' mb='10'>
               <Box mb='4' borderBottom='1px'>
                 Idioma
@@ -92,7 +111,7 @@ export function FilterDrawer({
                       </Radio>
                     ))}
                   <Radio value='' onChange={() => handleAllRadioChange('language')}>
-                    Todos los Idiomas
+                    Todos
                   </Radio>
                 </Flex>
               </RadioGroup>
@@ -125,7 +144,7 @@ export function FilterDrawer({
                       </Radio>
                     ))}
                   <Radio value='' onChange={() => handleAllRadioChange('year')}>
-                    Todos los Años
+                    Todos
                   </Radio>
                 </Flex>
               </RadioGroup>

src/components/filters/FilterOptions.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { FilterNumberPages } from '@components/filters/FilterNumberPages';
+import { FilterRadioGroup } from '@components/filters/FilterRadioGroup';
+import { capitalizeWords } from '@utils/utils';
+
+interface FilterAccordionTypes {
+  selectedMinPages: string;
+  selectedMaxPages: string;
+  handleMinChange: React.ChangeEventHandler<HTMLInputElement>;
+  handleMaxChange: React.ChangeEventHandler<HTMLInputElement>;
+  selectedLanguage: string;
+  handleLanguageChange: (value: string) => void;
+  languages: string[];
+  selectedYear: string;
+  handleYearChange: (value: string) => void;
+  years: string[];
+  selectedAuthor: string;
+  handleAuthorChange: (value: string) => void;
+  authors: string[];
+}
+
+export function getAccordionItems({
+  selectedMinPages,
+  selectedMaxPages,
+  handleMinChange,
+  handleMaxChange,
+  selectedLanguage,
+  handleLanguageChange,
+  languages,
+  selectedYear,
+  handleYearChange,
+  years,
+  selectedAuthor,
+  handleAuthorChange,
+  authors,
+}: FilterAccordionTypes) {
+  return [
+    {
+      title: 'N° de páginas',
+      content: (
+        <FilterNumberPages
+          min={selectedMinPages}
+          max={selectedMaxPages}
+          setMin={handleMinChange}
+          setMax={handleMaxChange}
+        />
+      ),
+    },
+    {
+      title: 'Idioma',
+      content: (
+        <FilterRadioGroup
+          options={languages.map(({ language, count }: any) => ({
+            value: language,
+            label: language,
+            count,
+          }))}
+          selectedValue={selectedLanguage}
+          onChange={handleLanguageChange}
+          allLabel='Todos'
+        />
+      ),
+    },
+    {
+      title: 'Año',
+      content: (
+        <FilterRadioGroup
+          options={years.map(({ year, count }: any) => ({
+            value: String(year),
+            label: String(year),
+            count,
+          }))}
+          selectedValue={selectedYear}
+          onChange={handleYearChange}
+          allLabel='Todos'
+        />
+      ),
+    },
+    {
+      title: 'Autor',
+      content: (
+        <FilterRadioGroup
+          options={authors.map(({ authors, count }: any) => ({
+            value: authors,
+            label: capitalizeWords(authors),
+            count,
+          }))}
+          selectedValue={selectedAuthor}
+          onChange={handleAuthorChange}
+          allLabel='Todos'
+        />
+      ),
+    },
+  ];
+}

src/components/filters/FilterRadioGroup.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { RadioGroup, Radio, Box, Flex } from '@chakra-ui/react';
+
+interface OptionType {
+  value: string;
+  label: string;
+  count: number;
+}
+
+interface FilterRadioGroupType {
+  options: Array<OptionType>;
+  selectedValue: string;
+  onChange: (value: string) => void;
+  allLabel: string;
+}
+
+export function FilterRadioGroup({
+  options,
+  selectedValue,
+  onChange,
+  allLabel,
+}: FilterRadioGroupType) {
+  return (
+    <RadioGroup value={selectedValue} onChange={onChange} colorScheme='green'>
+      <Flex direction='column' gap='3'>
+        <Radio value=''>{allLabel}</Radio>
+        {options.map(({ value, label, count }) => (
+          <Radio key={value} value={value}>
+            {label}
+            <Box as='span' ml='2' color='gray.500'>
+              ({count})
+            </Box>
+          </Radio>
+        ))}
+      </Flex>
+    </RadioGroup>
+  );
+}

src/components/nav/MobileNav.tsx

@@ -188,7 +188,8 @@ export function MobileNav() {
           <DrawerOverlay backdropFilter='blur(5px)' />
           <DrawerContent
             bg={bgDrawer}
-            maxW='294px'
+            maxW={{ base: '300px', sm: '380px' }}
+            borderRight='1px solid #A0AEC0'
             backdropFilter='auto'
             backdropBlur='12px'
             roundedRight='2xl'