cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajuste das iontabs | Tela esboço de cadastro sem validação

Browse Source
This commit is contained in:
Hugo Falcao
2022-04-14 23:12:06 -03:00
parent b0371dbbaa
commit a4948bb989
13 changed files with 262 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/Cadastro.css Normal file
View File

@@ -0,0 +1,3 @@
#nome-sobrenome{
display: flex;
}

95
src/pages/Cadastro.tsx Normal file
View File

@@ -0,0 +1,95 @@
import { IonIcon, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
import { arrowBack, logoFacebook, mail } from 'ionicons/icons';
// import CustomField from '../components/CustomField';
import { Action } from '../components/Action';
import { useEffect, useState } from 'react';
// import { validateForm } from '../data/utils';
import { useParams } from 'react-router';
import './Cadastro.css';
import ModalExample from '../components/Email';
const Cadastro: React.FC = () => {
const [ errors, setErrors ] = useState(false);
const createAccount = () => {
// const errors = validateForm();
setErrors(errors);
// if (!errors.length) {
// Submit your form here
// }
}
const { name } = useParams<{ name: string; }>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text={''} icon={arrowBack} defaultHref='mainpages' />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonGrid className="ion-padding">
<IonRow>
<IonCol size="12">
<IonCardTitle>Como você deseja se cadastrar?</IonCardTitle>
</IonCol>
</IonRow>
{/* <IonItem>
<IonIcon icon={logoFacebook} />
Continuar com Facebook
</IonItem>
<IonItem>
<IonIcon icon={mail} />
Continuar com e-mail
</IonItem> */}
<IonRow>
<IonCol size="12">
<div id='nome-sobrenome'>
<IonItem>
<IonLabel position='floating'>Nome</IonLabel>
<IonInput clearInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Sobrenome</IonLabel>
<IonInput clearInput></IonInput>
</IonItem>
</div>
<IonItem>
<IonLabel position='floating'>E-mail</IonLabel>
<IonInput clearInput type='email'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='stacked'>Data de nascimento</IonLabel>
<IonInput type='date'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Senha</IonLabel>
<IonInput clearInput type='password'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Confirme a senha</IonLabel>
<IonInput clearInput type='password'></IonInput>
</IonItem>
<IonButton className="ion-margin-top" expand="block" onClick={ createAccount }>Cadastrar-se</IonButton>
</IonCol>
</IonRow>
<small className='ion-margin-top'>
Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>.
</small>
<Action message="Já tem conta?" text="Login" link="/login" />
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Cadastro;

59
src/pages/Home.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { IonItem, IonLabel, IonInput, IonButton, IonCardTitle, IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react';
import { Action } from '../components/Action';
const Home: React.FC = () => {
return (
<IonPage>
<IonContent fullscreen>
<IonGrid className="ion-padding">
<IonRow>
<IonCol size="12">
<IonCardTitle>Como você deseja se cadastrar?</IonCardTitle>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<div id='nome-sobrenome'>
<IonItem>
<IonLabel position='floating'>Nome</IonLabel>
<IonInput clearInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Sobrenome</IonLabel>
<IonInput clearInput></IonInput>
</IonItem>
</div>
<IonItem>
<IonLabel position='floating'>E-mail</IonLabel>
<IonInput clearInput type='email'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='stacked'>Data de nascimento</IonLabel>
<IonInput type='date'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Senha</IonLabel>
<IonInput clearInput type='password'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Confirme a senha</IonLabel>
<IonInput clearInput type='password'></IonInput>
</IonItem>
<IonButton className="ion-margin-top" expand="block">Cadastrar-se</IonButton>
</IonCol>
</IonRow>
<small className='ion-margin-top'>
Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>.
</small>
<Action message="Já tem conta?" text="Login" link="/login" />
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Home;

46
src/pages/MainPages.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React, { useState, useRef } from 'react';
import {
IonTabs,
IonTabBar,
IonTabButton,
IonLabel,
IonPage,
IonIcon,
IonRouterOutlet
} from '@ionic/react';
import { Redirect, Route } from 'react-router-dom';
import { IonReactRouter } from '@ionic/react-router';
import { search, home, person } from 'ionicons/icons';
import Home from './Home';
export const MainPages: React.FC = () => {
return (
<IonTabs>
<IonRouterOutlet>
<Route path="/home" exact={true}>
<Home />
</Route>
<Route path="/mainpages" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="buscar" href="/buscar">
<IonIcon icon={search} />
<IonLabel>Buscar</IonLabel>
</IonTabButton>
<IonTabButton tab="home" href="/home">
<IonIcon icon={home} />
<IonLabel>Home</IonLabel>
</IonTabButton>
<IonTabButton tab="perfil" href="/perfil">
<IonIcon icon={person} />
<IonLabel>Perfil</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
)
}
export default MainPages;

0
src/pages/Page.css
View File

33
src/pages/Page.tsx
View File

@@ -1,33 +0,0 @@
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { useParams } from 'react-router';
import ExploreContainer from '../components/ExploreContainer';
import './Page.css';
const Page: React.FC = () => {
const { name } = useParams<{ name: string; }>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>{name}</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">{name}</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name={name} />
</IonContent>
</IonPage>
);
};
export default Page;