Skip to content

Commit aac2cbf

Browse files
LegolasVzlaLegolasVzla
committed
Adding component for Home page content
1 parent 4409b44 commit aac2cbf

File tree

4 files changed

+107
-20
lines changed

4 files changed

+107
-20
lines changed

‎frontend/src/App.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ function App() {
1919
<CustomNavbar/>
2020
<Switch>
2121
<Route path="/" exact component={Home}/>
22-
<Route path="/customdictionary" component={CustomDictionary}/>
23-
<Route path="/profile-get" component={ProfileGet}/>
24-
<Route path="/profile-update" component={ProfileUpdate}/>
25-
<Route path="/search-twitter" component={SearchTwitter}/>
26-
<Route path="/search-twitter-result" component={SearchTwitterResult}/>
27-
<Route path="/recent-twitter" component={RecentSearchTwitter}/>
22+
<Route exact path="/customdictionary" component={CustomDictionary}/>
23+
<Route exact path="/profile-get" component={ProfileGet}/>
24+
<Route exact path="/profile-update" component={ProfileUpdate}/>
25+
<Route exact path="/search-twitter" component={SearchTwitter}/>
26+
<Route exact path="/search-twitter-result" component={SearchTwitterResult}/>
27+
<Route exact path="/recent-twitter" component={RecentSearchTwitter}/>
2828
<Route component={PageError}/>
2929
</Switch>
3030
</Router>

‎frontend/src/components/HomeTrend.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react'
2+
import Row from 'react-bootstrap/Row'
3+
import Col from 'react-bootstrap/Col'
4+
import Card from 'react-bootstrap/Card'
5+
import * as FaIcons from "react-icons/fa";
6+
7+
function HomeTrend(props) {
8+
9+
const homeCardStyle = {
10+
marginTop: '1rem',
11+
borderRadius: '1rem',
12+
backgroundColor: 'rgba(0,0,0,.03)'
13+
};
14+
15+
return (
16+
<div>
17+
<Card style={homeCardStyle}>
18+
<Card.Body>
19+
<Card.Title>Nuestra Nube de Palabras</Card.Title>
20+
{props.dataContent ? (
21+
<Row>
22+
<Col lg={true} style={{ marginTop: '1rem'}}>
23+
</Col>
24+
</Row>
25+
) : (
26+
<div style={{textAlign:'center'}}><FaIcons.FaCogs style={{fontSize: '5rem',marginRight: '0.5rem'}}/>En Construcción</div>
27+
)}
28+
</Card.Body>
29+
</Card>
30+
<Card style={homeCardStyle}>
31+
<Card.Body>
32+
<Card.Title>Nuestros Tópicos</Card.Title>
33+
{props.dataContent ? (
34+
<Row>
35+
<Col lg={true} style={{ marginTop: '1rem'}}>
36+
</Col>
37+
</Row>
38+
) : (
39+
<div style={{textAlign:'center'}}><FaIcons.FaCogs style={{fontSize: '5rem',marginRight: '0.5rem'}}/>En Construcción</div>
40+
)}
41+
</Card.Body>
42+
</Card>
43+
</div>
44+
)
45+
}
46+
47+
export default HomeTrend

‎frontend/src/pages/Home.js

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ import React from 'react'
22
import Row from 'react-bootstrap/Row'
33
import Col from 'react-bootstrap/Col'
44
import Container from 'react-bootstrap/Container'
5+
import Card from 'react-bootstrap/Card'
56
import * as FaIcons from "react-icons/fa";
6-
import Jumbotron from 'react-bootstrap/Jumbotron'
7+
// import Jumbotron from 'react-bootstrap/Jumbotron'
8+
import Tab from 'react-bootstrap/Tab'
9+
import Nav from 'react-bootstrap/Nav'
10+
import HomeTrend from '../components/HomeTrend'
711

812
function Home() {
913

10-
const customJumbotronStyle = {
14+
const homeCard = {
1115
marginTop: '1rem',
12-
borderRadius: '1.5rem'
16+
borderRadius: '1rem',
17+
backgroundColor: 'rgba(0,0,0,.03)'
1318
};
1419

1520
return (
@@ -19,18 +24,48 @@ function Home() {
1924

2025
</Col>
2126
<Col xs={10} md={8}>
22-
<Jumbotron fluid style={customJumbotronStyle}>
23-
<Container>
24-
<h2>El Analizador de Tópicos de redes Sociales</h2>
25-
<p style={{textAlign:'justify'}}>
26-
<FaIcons.FaRegComment style={{marginRight: '0.5rem'}}/> Esta aplicación le permitirá realizar búsquedas sobre redes sociales, para saber si se está hablando bien o mal sobre una palabra buscada, mostrando estadísticas relacionadas a la misma a través del tiempo.
27-
</p>
28-
</Container>
29-
</Jumbotron>
30-
27+
<Card
28+
style={homeCard}
29+
className="mb-2"
30+
>
31+
<Card.Body>
32+
<Card.Title><h3>El Analizador de Tópicos de Redes Sociales</h3></Card.Title>
33+
<Card.Text style={{textAlign:'justify'}}>
34+
<FaIcons.FaRegComment style={{marginRight: '0.5rem'}}/> Esta aplicación le permitirá realizar búsquedas sobre redes sociales, para saber si se está hablando bien o mal sobre una palabra buscada, mostrando estadísticas relacionadas a la misma a través del tiempo.
35+
</Card.Text>
36+
</Card.Body>
37+
</Card>
38+
<Card style={homeCard}>
39+
<Card.Header style={{color: '#005C72'}}><FaIcons.FaBolt style={{marginRight: '0.5rem'}}/><strong>Tendencias y Opiniones</strong></Card.Header>
40+
<Card.Body>
41+
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
42+
<Nav variant="pills">
43+
<Nav.Item>
44+
<Nav.Link eventKey="first"><FaIcons.FaTwitter style={{marginRight: '0.5rem'}}/>Twitter</Nav.Link>
45+
</Nav.Item>
46+
<Nav.Item>
47+
<Nav.Link eventKey="second"><FaIcons.FaFacebook style={{marginRight: '0.5rem'}}/>Facebook</Nav.Link>
48+
</Nav.Item>
49+
<Nav.Item>
50+
<Nav.Link eventKey="third"><FaIcons.FaInstagram style={{marginRight: '0.5rem'}}/>Instagram</Nav.Link>
51+
</Nav.Item>
52+
</Nav>
53+
<Tab.Content>
54+
<Tab.Pane eventKey="first">
55+
<HomeTrend dataContent={true}/>
56+
</Tab.Pane>
57+
<Tab.Pane eventKey="second">
58+
<HomeTrend dataContent={false}/>
59+
</Tab.Pane>
60+
<Tab.Pane eventKey="third">
61+
<HomeTrend dataContent={false}/>
62+
</Tab.Pane>
63+
</Tab.Content>
64+
</Tab.Container>
65+
</Card.Body>
66+
</Card>
3167
</Col>
3268
<Col xs={4} md={2}>
33-
3469
</Col>
3570
</Row>
3671
</Container>

‎frontend/src/pages/SearchTwitter.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import Form from 'react-bootstrap/Form'
66
import Button from 'react-bootstrap/Button'
77
import Card from 'react-bootstrap/Card'
88
import Breadcrumb from 'react-bootstrap/Breadcrumb'
9-
import * as FaIcons from "react-icons/fa";
9+
import { Prompt } from 'react-router'
10+
import * as FaIcons from "react-icons/fa"
1011

1112
function SearchTwitter() {
1213
return (
@@ -29,6 +30,10 @@ function SearchTwitter() {
2930
<FaIcons.FaRegComment/> Ingresa una palabra para mostrar el tópico obtenido y también para saber si están hablando bien o mal sobre la misma.
3031
</Card.Text>
3132
<Form>
33+
<Prompt
34+
when
35+
message="¿Está seguro de querer abandonar su búsqueda?"
36+
/>
3237
<Form.Group controlId="formBasicEmail" style={{marginTop: '1rem'}}>
3338
<Form.Control type="email"/>
3439
</Form.Group>

0 commit comments

Comments
 (0)