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

src/App.tsx

@@ -12,7 +12,7 @@ import {
 import { IonReactRouter } from "@ionic/react-router";
 import { ellipse, square, triangle } from "ionicons/icons";
 import Tab1 from "./pages/Tab1";
-import Tab2 from "./pages/Tab2";
+import Tab2 from "./pages/home";
 import Tab3 from "./pages/Tab3";
 
 /* Core CSS required for Ionic components to work properly */

src/components/ListComponent.css

@@ -0,0 +1,14 @@
+
+.list {
+    border-radius: 20px; 
+    padding: 0 0 0 0;
+    
+}
+
+.ListItemText {
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+ion-list-header {
+    /* color: "primary"; */
+}

src/components/ListComponent.tsx

@@ -0,0 +1,48 @@
+import {
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+} from "@ionic/react";
+import "../components/ListComponent.css";
+
+const ListComponent: React.FC<{ title?: string; laws: string[] }> = (props) => {
+  const title = props.title;
+  const laws = props.laws;
+  return (
+    <IonContent>
+      {title ? (
+        <IonListHeader>
+          <IonLabel>{title}</IonLabel>
+        </IonListHeader>
+      ) : null}
+
+      {laws.map((LawName: string) => {
+        return (
+          <IonItem href="#">
+            <p className="ListItemText">{LawName}</p>
+          </IonItem>
+        );
+      })}
+
+      {/*
+      <IonList className="list" lines="full">
+        <IonItem href="#">
+          <p className="ListItemText">Ley #1</p>
+        </IonItem>
+        <IonItem href="#">
+          <p className="ListItemText">Ley #1</p>
+        </IonItem>
+        <IonItem href="#">
+          <p className="ListItemText">Ley #1</p>
+        </IonItem>
+        <IonItem href="#">
+          <p className="ListItemText">Ley #1</p>
+        </IonItem>
+      </IonList>
+      */}
+    </IonContent>
+  );
+};
+export default ListComponent;

src/pages/Tab1.tsx

@@ -1,22 +1,23 @@
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
 import './Tab1.css';
+import '../components/ListComponent'
+import ListComponent from '../components/ListComponent';
 
 const Tab1: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Tab 1</IonTitle>
+          <IonTitle>List component test!</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar>
-            <IonTitle size="large">Tab 1</IonTitle>
+            <IonTitle size="large">This is a list</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ExploreContainer name="Tab 1 page" />
+       <ListComponent laws={[]}/>
       </IonContent>
     </IonPage>
   );

src/pages/Tab2.tsx

@@ -1,25 +0,0 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
-import './Tab2.css';
-
-const Tab2: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Tab 2</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Tab 2</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <ExploreContainer name="Tab 2 page" />
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Tab2;

src/pages/home.tsx

@@ -0,0 +1,41 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import ExploreContainer from "../components/ExploreContainer";
+import "./home.css";
+import "../components/ListComponent";
+import ListComponent from "../components/ListComponent";
+
+const Tab2: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Renacer Social</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Renacer Social</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <div className="ion-padding">
+          <h5>Bienvenidos</h5>
+          <p>
+            Somos una organización Lorem Ipsum is simply dummy text of the
+            printing and typesetting industry. Lorem Ipsum.
+          </p>
+        </div>
+
+        <ListComponent laws={["eliam", "Sergio"]} title="Articulos Recientes" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;