added use of dropdown component to advice page

src/components/ListComponent.tsx

@@ -1,7 +1,9 @@
 import { IonContent, IonItem, IonLabel, IonListHeader } from "@ionic/react";
 import "../components/ListComponent.css";
 
-const ListComponent: React.FC<{ title?: string; items: string[] }> = (props) => {
+const ListComponent: React.FC<{ title?: string; items: string[] }> = (
+  props
+) => {
   const title = props.title;
   const items = props.items;
   return (

src/intefaces.ts

@@ -0,0 +1,6 @@
+interface Category {
+    name: string;
+    listItems: string[];
+}
+
+export default Category;

src/pages/AdviceListPage.tsx

@@ -4,8 +4,21 @@ import {
   IonPage,
   IonTitle,
   IonToolbar,
+  IonCard,
 } from "@ionic/react";
-import ListComponent from "../components/ListComponent";
+import DropdownComponent from "../components/DropdownComponent";
+import "../intefaces";
+
+const categories = [
+  {
+    name: "Paternidad",
+    listItems: ["Consejo de Paternidad 1", "Consejo de Paternidad 2"],
+  },
+  {
+    name: "Abuso Sexual",
+    listItems: ["Consejo de Abuso Sexual 1", "Consejo de Abuso Sexual 2"],
+  },
+];
 
 const AdviceListPage: React.FC = () => {
   return (
@@ -21,7 +34,9 @@ const AdviceListPage: React.FC = () => {
             <IonTitle size="large">Consejos</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent laws={["Consejo 1", "Consejo 2"]} />
+        <IonCard>
+          <DropdownComponent category={categories} />
+        </IonCard>
       </IonContent>
     </IonPage>
   );