[feat] Add accordion component to advice list page

src/components/DropdownComponent.css

@@ -0,0 +1,3 @@
+.accordion-list-container {
+    width: 100%;
+}

src/components/DropdownComponent.tsx

@@ -4,10 +4,9 @@ import {
   IonItem,
   IonLabel,
 } from "@ionic/react";
-import "../components/ListComponent";
 import ListComponent from "../components/ListComponent";
-import "../intefaces";
-import Category from "../intefaces";
+import { Category } from "../types";
+import "./DropdownComponent.css";
 
 const DropdownComponent: React.FC<{
   category: Category[];
@@ -16,25 +15,15 @@ const DropdownComponent: React.FC<{
   return (
     <IonAccordionGroup>
       {category.map((catItem: Category, index) => {
-        var position = "";
-        if (index === 1) {
-          position = "first";
-        } else if (index === 2) {
-          position = "second";
-        } else if (index === 3) {
-          position = "third";
-        } else if (index === 4) {
-          position = "fourth";
-        } else if (index === 5) {
-          position = "fifth";
-        }
         return (
-          <IonAccordion value={position}>
+          <IonAccordion value={`${index}`}>
             <IonItem slot="header" color="light">
               <IonLabel>{catItem.name}</IonLabel>
             </IonItem>
             <IonItem slot="content">
-              <ListComponent items={catItem.listItems} />
+              <div className="accordion-list-container">
+                <ListComponent items={catItem.listItems} />
+              </div>
             </IonItem>
           </IonAccordion>
         );

src/components/ListComponent.tsx

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

src/intefaces.ts

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

src/pages/AdviceListPage.tsx

@@ -4,10 +4,9 @@ import {
   IonPage,
   IonTitle,
   IonToolbar,
-  IonCard,
 } from "@ionic/react";
 import DropdownComponent from "../components/DropdownComponent";
-import "../intefaces";
+import "../types";
 
 const categories = [
   {
@@ -34,9 +33,8 @@ const AdviceListPage: React.FC = () => {
             <IonTitle size="large">Consejos</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonCard>
-          <DropdownComponent category={categories} />
-        </IonCard>
+
+        <DropdownComponent category={categories} />
       </IonContent>
     </IonPage>
   );

src/types.ts

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