chore: changes in aside and Search.tsx

src/components/AboutCategories.tsx

@@ -4,9 +4,9 @@ import { Box, Text, Link } from '@chakra-ui/react';
 import { aboutCategories } from '../data/links';
 
 export function AboutCategories({ category }: any) {
-  const filteredAboutCategories = aboutCategories.filter(
-    (item) => item.category === category,
-  );
+  const filteredAboutCategories = aboutCategories.filter((item) => {
+    return item.category === category;
+  });
 
   return (
     <>
@@ -18,8 +18,8 @@ export function AboutCategories({ category }: any) {
           <Text mt='2' fontSize='sm'>
             {description}
           </Text>
-          <Box display='inline' mt='2'>
-            Fuente:{' '}
+          <Box display='inline' mt='4'>
+            Más Info:{' '}
             <Link href={wiki} isExternal color='green.600'>
               Wikipedia.
             </Link>

src/components/skeletons/SkeletonABooks.tsx

@@ -44,6 +44,13 @@ export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
               skeletonHeight='5'
               mb='10'
             />
+            <SkeletonText
+              mt='1'
+              noOfLines={14}
+              spacing='2'
+              skeletonHeight='3'
+              mb='10'
+            />
             <SkeletonText mt='1' noOfLines={4} spacing='2' skeletonHeight='3' />
           </Box>
         </Aside>

src/pages/Search.tsx

@@ -25,6 +25,7 @@ import { FilterDrawer } from '../components/FilterDrawer';
 import ResultLength from '../components/ResultLength';
 import { AboutCategories } from '../components/AboutCategories';
 import { Lost } from '../assets/assets';
+import { aboutCategories } from '../data/links';
 
 export default function Search() {
   const location = useLocation();
@@ -36,6 +37,7 @@ export default function Search() {
   const [selectedYear, setSelectedYear] = useState('');
   const { query, param } = useParams();
   let asideFilter;
+  let aboutCategoriesUI;
   let buttonFilter;
 
   const { data } = useFilter(query, param);
@@ -170,6 +172,22 @@ export default function Search() {
     );
   }
 
+  // Verifica si los 3 campos de aboutCategories esten con info o no
+  const categoryCheck = aboutCategories.find((item) => {
+    return item.category === param;
+  });
+
+  if (categoryCheck) {
+    const isValid =
+      categoryCheck.category && categoryCheck.description && categoryCheck.wiki;
+
+    if (isValid) {
+      aboutCategoriesUI = <AboutCategories category={param} />;
+    } else {
+      aboutCategoriesUI = null;
+    }
+  }
+
   return (
     <>
       <MainHead title={`${param} | XBuniverse`} />
@@ -206,7 +224,7 @@ export default function Search() {
       >
         <Aside>
           <ResultLength data={data} />
-          <AboutCategories category={param} />
+          {aboutCategoriesUI}
           {asideFilter}
         </Aside>
         {filteredBooks.length > 0 ? (