[mant] Merge all current conflicta

src/components/DropdownComponent.tsx

   IonItem,
   IonLabel,
 } from "@ionic/react";
-import ListComponent from "../components/ListComponent";
-import { Category } from "../types";
+import { PropsWithChildren } from "react";
 import "./DropdownComponent.css";
 
-const DropdownComponent: React.FC<{
-  category: Category[];
-}> = (props) => {
-  const category = props.category;
+const DropdownComponent: React.FC<
+  {
+    name: string;
+  } & PropsWithChildren
+> = ({ name, children }) => {
   return (
     <IonAccordionGroup>
-      {category.map((catItem: Category, index) => {
-        return (
-          <IonAccordion value={`${index}`}>
-            <IonItem slot="header" color="light">
-              <IonLabel>{catItem.name}</IonLabel>
-            </IonItem>
-            <IonItem slot="content">
-              <div className="accordion-list-container">
-                <ListComponent items={catItem.listItems} />
-              </div>
-            </IonItem>
-          </IonAccordion>
-        );
-      })}
+      <IonAccordion value={name}>
+        <IonItem slot="header" color="light">
+          <IonLabel>{name}</IonLabel>
+        </IonItem>
+        <IonItem slot="content">
+          <div className="accordion-list-container">{children}</div>
+        </IonItem>
+      </IonAccordion>
     </IonAccordionGroup>
   );
 };

src/components/TopicList.tsx

-import { IonContent, IonItem, IonLabel, IonListHeader } from "@ionic/react";
+import {
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+} from "@ionic/react";
 import { Topic } from "../types";
 import SkeletonText from "./SkeletonText";
 import "../components/TopicList.css";
   loading?: boolean;
 }> = ({ title, topics, loading }) => {
   return (
-    <IonContent>
+    <IonList>
       {title ? (
         <IonListHeader>
           <IonLabel>{title}</IonLabel>
             </IonItem>
           );
         })}
-    </IonContent>
+    </IonList>
   );
 };
 export default TopicList;

src/pages/AdviceListPage.tsx

 } from "@ionic/react";
 import { alertCircleOutline } from "ionicons/icons";
 import useSWR from "swr";
+import DropdownComponent from "../components/DropdownComponent";
 import TopicList from "../components/TopicList";
 import { fetcher } from "../lib/api";
 import { Topic } from "../types";
             <IonTitle size="large">Advice</IonTitle>
           </IonToolbar>
         </IonHeader>
-        {data && <TopicList loading={isLoading} topics={data as Topic[]} />}
+        <DropdownComponent name="Parentesco">
+          <TopicList
+            loading={isLoading}
+            topics={data ? (data as Topic[]) : []}
+          />
+        </DropdownComponent>
         <IonToast
           icon={alertCircleOutline}
           color="danger"

src/pages/ArticlePage.tsx

 import { fetcher } from "../lib/api";
 import useSWR from "swr";
 import { formatDate, getBlockTitle, getPageProperty } from "notion-utils";
-import omit from "lodash/omit";
 import SkeletonText from "../components/SkeletonText";
 
 const ArticlePage: React.FC<RouteComponentProps<{ articleId: string }>> = ({

src/pages/LawListPage.tsx

             <IonTitle size="large">Leyes</IonTitle>
           </IonToolbar>
         </IonHeader>
-        {data && <TopicList loading={isLoading} topics={data as Topic[]} />}
+        <TopicList loading={isLoading} topics={data ? (data as Topic[]) : []} />
         <IonToast
           icon={alertCircleOutline}
           color="danger"