瀏覽代碼

Adding Capsules List Page and Single Capsule Page. Additionally, made minor text editing.

Alejandro Soledad 2 年之前
父節點
當前提交
643ccdb383

+ 1
- 1
package-lock.json 查看文件

30
         "react-dom": "^18.2.0",
30
         "react-dom": "^18.2.0",
31
         "react-router": "^5.2.0",
31
         "react-router": "^5.2.0",
32
         "react-router-dom": "^5.2.0",
32
         "react-router-dom": "^5.2.0",
33
-        "react-scripts": "^5.0.0",
33
+        "react-scripts": "^5.0.1",
34
         "typescript": "^4.1.3",
34
         "typescript": "^4.1.3",
35
         "web-vitals": "^0.2.4",
35
         "web-vitals": "^0.2.4",
36
         "workbox-background-sync": "^5.1.4",
36
         "workbox-background-sync": "^5.1.4",

+ 1
- 1
package.json 查看文件

25
     "react-dom": "^18.2.0",
25
     "react-dom": "^18.2.0",
26
     "react-router": "^5.2.0",
26
     "react-router": "^5.2.0",
27
     "react-router-dom": "^5.2.0",
27
     "react-router-dom": "^5.2.0",
28
-    "react-scripts": "^5.0.0",
28
+    "react-scripts": "^5.0.1",
29
     "typescript": "^4.1.3",
29
     "typescript": "^4.1.3",
30
     "web-vitals": "^0.2.4",
30
     "web-vitals": "^0.2.4",
31
     "workbox-background-sync": "^5.1.4",
31
     "workbox-background-sync": "^5.1.4",

二進制
src/assets/BombaPuertorriquena.jpg 查看文件


+ 3
- 3
src/pages/AboutUs.tsx 查看文件

21
     <IonPage>
21
     <IonPage>
22
       <IonHeader>
22
       <IonHeader>
23
         <IonToolbar>
23
         <IonToolbar>
24
-          <IonTitle>More About Us</IonTitle>
24
+          <IonTitle>Más sobre nosotros</IonTitle>
25
           <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
25
           <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
26
         </IonToolbar>
26
         </IonToolbar>
27
       </IonHeader>
27
       </IonHeader>
28
       <IonContent fullscreen className="ion-padding">
28
       <IonContent fullscreen className="ion-padding">
29
         <h1>Enciclopedia PR</h1>
29
         <h1>Enciclopedia PR</h1>
30
-        <h2>More about Us:</h2>
31
-        <p>Para mas informacion de nosotros si les interensan ir a la pagina https://enciclopediapr.org/</p>
30
+        <h2>Más sobre nosotros:</h2>
31
+        <p>Para más información sobre EnciclopediaPR, visite la página <a {href='https://enciclopediapr.org/'}></a> {enciclopediapr.org} </p>
32
       </IonContent>
32
       </IonContent>
33
       <IonFooter>
33
       <IonFooter>
34
         <IonToolbar>
34
         <IonToolbar>

+ 1
- 1
src/pages/Biography.tsx 查看文件

22
         <IonPage>
22
         <IonPage>
23
             <IonHeader>
23
             <IonHeader>
24
                 <IonToolbar>
24
                 <IonToolbar>
25
-                    <IonTitle>Biography Information</IonTitle>
25
+                    <IonTitle>Biografía</IonTitle>
26
                     <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
26
                     <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
27
                 </IonToolbar>
27
                 </IonToolbar>
28
             </IonHeader>
28
             </IonHeader>

+ 0
- 0
src/pages/Capsule.css 查看文件


+ 50
- 0
src/pages/Capsule.tsx 查看文件

1
+import {
2
+    IonPage,
3
+    IonContent,
4
+    IonHeader,
5
+    IonTitle,
6
+    IonToolbar,
7
+    IonFooter,
8
+    IonNavLink,
9
+    IonTabButton,
10
+    IonIcon,
11
+    IonImg
12
+} from '@ionic/react';
13
+import { arrowBack } from 'ionicons/icons';
14
+import React from 'react';
15
+import './Capsule.css';
16
+import ListCapsules from './ListCapsules';
17
+import EnciclopediaPR from '../assets/EnciclopediaPR.png';
18
+import Bomba from '../assets/BombaPuertorriquena.jpg';
19
+
20
+const Capsule: React.FC = () => {
21
+    return (
22
+        <IonPage>
23
+            <IonHeader>
24
+                <IonToolbar>
25
+                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
26
+                    <IonTitle>Cápsula</IonTitle>
27
+                </IonToolbar>
28
+            </IonHeader>
29
+            <IonContent fullscreen className="ion-padding">
30
+                <IonImg style={{ height: 300, width: 600 }} src={Bomba} alt='Logo'></IonImg>
31
+                <h1>Breve Historia del baile en Puerto Rico</h1>
32
+
33
+                <p>Han existido distintas formas de danzar o bailar desde la historia muy antigua de la humanidad. En Puerto Rico el primer baile documentado por los cronistas de Indias es el llamado areito, con las variantes de escritura areyto y areíto. Era un baile coreado y musicalizado, dirigido por un guía. Esta manifestación de movimiento corporal, que Gonzalo Fernández de Oviedo llamó “bailar cantando”, fue común en los grupos indígenas de la región caribeña.</p>
34
+                <p>Se ejecutaba en hileras, con los participantes cogidos de las manos, de los brazos o, según Bartolomé de las Casas, “los brazos de los unos puestos sobre los hombros de los otros”. Según Pedro Mártir de Anglería, los participantes llevaban caracoles en los brazos y piernas, con los que producían “un ruido agradable”. Narraban una historia y el guía indicaba qué pasos y cantos se repetirían hasta que ésta culminara.</p>
35
+                <p>Aunque la llegada de los conquistadores españoles produjo una rápida desaparición de la población indígena y de cualquier expresión autóctona que las autoridades consideraran pagana, Fray Iñigo Abbad y Lasierra afirmaba en 1789 que “la diversión más apreciable para estos isleños son los bailes; los tienen sin más motivo que el de pasar el tiempo y rara vez faltan en una cosa u otra”.</p>
36
+            </IonContent>
37
+            <IonFooter>
38
+                <IonToolbar>
39
+                    <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
40
+                        <IonTabButton tab="ListCapsules" href="/ListCapsules">
41
+                            <IonIcon icon={arrowBack} />
42
+                        </IonTabButton>
43
+                    </IonNavLink>
44
+                </IonToolbar>
45
+            </IonFooter>
46
+        </IonPage>
47
+    );
48
+};
49
+
50
+export default Capsule;

+ 13
- 8
src/pages/HomePage.tsx 查看文件

19
 import { square } from 'ionicons/icons';
19
 import { square } from 'ionicons/icons';
20
 import './HomePage.css';
20
 import './HomePage.css';
21
 import ListBiographies from './ListBiographies';
21
 import ListBiographies from './ListBiographies';
22
+import ListCapsules from './ListCapsules';
22
 import AboutUs from './AboutUs';
23
 import AboutUs from './AboutUs';
23
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
24
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
24
 
25
 
27
     <IonPage>
28
     <IonPage>
28
       <IonHeader>
29
       <IonHeader>
29
         <IonToolbar>
30
         <IonToolbar>
30
-          <IonTitle>Home Page</IonTitle>
31
           <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
31
           <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
32
+          <IonTitle>Hogar</IonTitle>
32
         </IonToolbar>
33
         </IonToolbar>
33
       </IonHeader>
34
       </IonHeader>
34
       <IonContent fullscreen>
35
       <IonContent fullscreen>
35
         <IonCard>
36
         <IonCard>
36
           <IonCardHeader>
37
           <IonCardHeader>
37
-            <IonCardTitle>Biography</IonCardTitle>
38
-            <IonCardSubtitle>Search for all Biographies</IonCardSubtitle>
38
+            <IonCardTitle>Biografías</IonCardTitle>
39
+            <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
39
           </IonCardHeader>
40
           </IonCardHeader>
40
           <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
41
           <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
41
             <IonButton size="default" expand="block" shape="round">
42
             <IonButton size="default" expand="block" shape="round">
42
-              Go to
43
+              Buscar
43
             </IonButton>
44
             </IonButton>
44
           </IonNavLink>
45
           </IonNavLink>
45
         </IonCard>
46
         </IonCard>
46
         <IonCard>
47
         <IonCard>
47
           <IonCardHeader>
48
           <IonCardHeader>
48
-            <IonCardTitle>Capsule</IonCardTitle>
49
-            <IonCardSubtitle>Search for all Capsule</IonCardSubtitle>
49
+            <IonCardTitle>Cápsulas</IonCardTitle>
50
+            <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
50
           </IonCardHeader>
51
           </IonCardHeader>
51
-          <IonButton size="default" expand="block" shape="round">Go to</IonButton>
52
+          <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
53
+            <IonButton size="default" expand="block" shape="round">
54
+              Buscar
55
+            </IonButton>
56
+          </IonNavLink>
52
         </IonCard>
57
         </IonCard>
53
       </IonContent>
58
       </IonContent>
54
       <IonFooter>
59
       <IonFooter>
56
           <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
61
           <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
57
             <IonTabButton tab="AboutUs" href="/AboutUs">
62
             <IonTabButton tab="AboutUs" href="/AboutUs">
58
               <IonIcon icon={square} />
63
               <IonIcon icon={square} />
59
-              <IonLabel>About Us</IonLabel>
64
+              <IonLabel>Sobre nosotros</IonLabel>
60
             </IonTabButton>
65
             </IonTabButton>
61
           </IonNavLink>
66
           </IonNavLink>
62
         </IonToolbar>
67
         </IonToolbar>

+ 2
- 2
src/pages/ListBiographies.tsx 查看文件

29
     <IonPage>
29
     <IonPage>
30
       <IonHeader>
30
       <IonHeader>
31
         <IonToolbar>
31
         <IonToolbar>
32
-          <IonTitle>List of Biographies</IonTitle>
33
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
32
+          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>\
33
+          <IonTitle>Lista de Biografías</IonTitle>
34
         </IonToolbar>
34
         </IonToolbar>
35
       </IonHeader>
35
       </IonHeader>
36
       <IonContent fullscreen>
36
       <IonContent fullscreen>

+ 0
- 0
src/pages/ListCapsules.css 查看文件


+ 64
- 0
src/pages/ListCapsules.tsx 查看文件

1
+import {
2
+    IonList,
3
+    IonItem,
4
+    IonLabel,
5
+    IonImg,
6
+    IonSearchbar,
7
+    IonContent,
8
+    IonHeader,
9
+    IonPage,
10
+    IonTitle,
11
+    IonToolbar,
12
+    IonButton,
13
+    IonNavLink,
14
+    IonFooter,
15
+    IonTabButton,
16
+    IonIcon
17
+  } from '@ionic/react';
18
+  import { arrowBack } from 'ionicons/icons';
19
+  import './ListCapsules.css';
20
+  import HomePage from './HomePage';
21
+  import Capsule from './Capsule'
22
+  import EnciclopediaPR from '../assets/EnciclopediaPR.png';
23
+
24
+  const ListCapsules: React.FC = () => {
25
+    return (
26
+      <IonPage>
27
+        <IonHeader>
28
+          <IonToolbar>
29
+            <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
30
+            <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
31
+          </IonToolbar>
32
+        </IonHeader>
33
+        <IonContent fullscreen>
34
+            <IonSearchbar></IonSearchbar>
35
+            <IonList inset={true}>
36
+                <IonItem>
37
+                    <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
38
+                    <IonNavLink routerDirection="forward" component={() => <Capsule />}>
39
+                    <IonButton>Visitar</IonButton>
40
+          </IonNavLink>
41
+                </IonItem>
42
+                <IonItem>
43
+                    <IonLabel>Cápsula#2</IonLabel>
44
+                </IonItem>
45
+                <IonItem>
46
+                    <IonLabel>Cápsula#3</IonLabel>
47
+                </IonItem>
48
+            </IonList>
49
+        </IonContent>
50
+        <IonFooter>
51
+          <IonToolbar>
52
+            <IonNavLink routerDirection="forward" component={() => <HomePage />}>
53
+                <IonTabButton tab="HomePage" href="/HomePage">
54
+                <IonIcon icon={arrowBack} />
55
+              </IonTabButton>
56
+            </IonNavLink>
57
+          </IonToolbar>
58
+        </IonFooter>
59
+      </IonPage>
60
+    );
61
+  };
62
+  
63
+  export default ListCapsules;
64
+