Merge branch 'eliam-sprint-1' of sergio.mattei/RenacerSocial into main

src/components/DropdownComponent.css

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

src/components/DropdownComponent.tsx

@@ -0,0 +1,34 @@
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonItem,
+  IonLabel,
+} from "@ionic/react";
+import ListComponent from "../components/ListComponent";
+import { Category } from "../types";
+import "./DropdownComponent.css";
+
+const DropdownComponent: React.FC<{
+  category: Category[];
+}> = (props) => {
+  const category = props.category;
+  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>
+        );
+      })}
+    </IonAccordionGroup>
+  );
+};
+export default DropdownComponent;

src/components/ListComponent.css

@@ -7,8 +7,4 @@
 
 .ListItemText {
     font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-ion-list-header {
-    /* color: "primary"; */
-}
+}

src/components/ListComponent.tsx

@@ -1,25 +1,27 @@
-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; laws: string[] }> = (props) => {
+const ListComponent: React.FC<{ title?: string; items: string[] }> = (
+  props
+) => {
   const title = props.title;
-  const laws = props.laws;
+  const items = props.items;
   return (
-    <IonContent>
+    <IonList>
       {title ? (
         <IonListHeader>
           <IonLabel>{title}</IonLabel>
         </IonListHeader>
       ) : null}
 
-      {laws.map((lawName: string) => {
+      {items.map((itemName: string) => {
         return (
-          <IonItem routerLink={`/article/${encodeURIComponent(lawName)}`}>
-            <p className="ListItemText">{lawName}</p>
+          <IonItem routerLink={`/article/${encodeURIComponent(itemName)}`}>
+            <p className="ListItemText">{itemName}</p>
           </IonItem>
         );
       })}
-    </IonContent>
+    </IonList>
   );
 };
 export default ListComponent;

src/pages/AdviceListPage.tsx

@@ -5,7 +5,19 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import ListComponent from "../components/ListComponent";
+import DropdownComponent from "../components/DropdownComponent";
+import "../types";
+
+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 +33,8 @@ const AdviceListPage: React.FC = () => {
             <IonTitle size="large">Consejos</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent laws={["Consejo 1", "Consejo 2"]} />
+
+        <DropdownComponent category={categories} />
       </IonContent>
     </IonPage>
   );

src/pages/Home.tsx

@@ -31,7 +31,7 @@ const Home: React.FC = () => {
         </div>
 
         <ListComponent
-          laws={["Articulo 1", "Articulo 2"]}
+          items={["Articulo 1", "Articulo 2"]}
           title="Articulos Recientes"
         />
       </IonContent>

src/pages/LawListPage.tsx

@@ -21,7 +21,7 @@ const LawListPage: React.FC = () => {
             <IonTitle size="large">Leyes</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent laws={["Law 1", "Law 2"]} />
+        <ListComponent items={["Law 1", "Law 2"]} />
       </IonContent>
     </IonPage>
   );

src/types.ts

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