Browse Source

added use of dropdown component to advice page

eliam.ruiz 2 years ago
parent
commit
611a7f1a06
3 changed files with 26 additions and 3 deletions
  1. 3
    1
      src/components/ListComponent.tsx
  2. 6
    0
      src/intefaces.ts
  3. 17
    2
      src/pages/AdviceListPage.tsx

+ 3
- 1
src/components/ListComponent.tsx View File

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

+ 6
- 0
src/intefaces.ts View File

1
+interface Category {
2
+    name: string;
3
+    listItems: string[];
4
+}
5
+
6
+export default Category;

+ 17
- 2
src/pages/AdviceListPage.tsx View File

4
   IonPage,
4
   IonPage,
5
   IonTitle,
5
   IonTitle,
6
   IonToolbar,
6
   IonToolbar,
7
+  IonCard,
7
 } from "@ionic/react";
8
 } from "@ionic/react";
8
-import ListComponent from "../components/ListComponent";
9
+import DropdownComponent from "../components/DropdownComponent";
10
+import "../intefaces";
11
+
12
+const categories = [
13
+  {
14
+    name: "Paternidad",
15
+    listItems: ["Consejo de Paternidad 1", "Consejo de Paternidad 2"],
16
+  },
17
+  {
18
+    name: "Abuso Sexual",
19
+    listItems: ["Consejo de Abuso Sexual 1", "Consejo de Abuso Sexual 2"],
20
+  },
21
+];
9
 
22
 
10
 const AdviceListPage: React.FC = () => {
23
 const AdviceListPage: React.FC = () => {
11
   return (
24
   return (
21
             <IonTitle size="large">Consejos</IonTitle>
34
             <IonTitle size="large">Consejos</IonTitle>
22
           </IonToolbar>
35
           </IonToolbar>
23
         </IonHeader>
36
         </IonHeader>
24
-        <ListComponent laws={["Consejo 1", "Consejo 2"]} />
37
+        <IonCard>
38
+          <DropdownComponent category={categories} />
39
+        </IonCard>
25
       </IonContent>
40
       </IonContent>
26
     </IonPage>
41
     </IonPage>
27
   );
42
   );