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

wip

Browse Source
This commit is contained in:
Hugo Falcao
2022-08-24 23:11:02 -03:00
parent 88df2c3a5f
commit 99b01cad85
1 changed files with 29 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/pages/CadastrarItinerario/CadastrarItinerario.tsx
View File

@@ -2,97 +2,56 @@ import {
IonBackButton, IonBackButton,
IonButton, IonButton,
IonButtons, IonButtons,
IonCard,
IonCardContent,
IonContent, IonContent,
IonHeader, IonHeader,
IonIcon, IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonPage, IonPage,
IonRadio,
IonRadioGroup,
IonTitle, IonTitle,
IonToolbar, IonToolbar,
} from "@ionic/react"; } from "@ionic/react";
import { close, locateOutline, locationOutline } from "ionicons/icons"; import { close, locateOutline, locationOutline } from "ionicons/icons";
import { useState } from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete"; import GooglePlacesAutocomplete from "react-google-places-autocomplete";
export default function CadastrarItinerario() { export default function CadastrarItinerario() {
const [selected, setSelected] = useState<any>("");
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
<IonToolbar> <IonToolbar>
<IonTitle>Cadastrar Itinerário</IonTitle>
<IonButtons slot="start"> <IonButtons slot="start">
<IonBackButton icon={close} text="" defaultHref="/perfil" /> <IonBackButton icon={close} text="" defaultHref="/perfil" />
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent fullscreen> <IonContent fullscreen>
<IonHeader collapse="condense"> <div className="m-3">
<IonToolbar> <h1>Digite o endereço de onde você iniciará a rota do itinerário</h1>
<IonTitle size="large">Cadastrar Itinerário</IonTitle> <div className="inputs-from-to">
</IonToolbar> <IonIcon icon={locateOutline}></IonIcon>
</IonHeader> <GooglePlacesAutocomplete
<IonCard> apiKey={process.env.REACT_APP_KEY_API}
<IonCardContent> apiOptions={{ language: "pt-br", region: "br" }}
<div className="inputs-from-to"> selectProps={{
<IonIcon icon={locateOutline}></IonIcon> className: "input-autocomplete",
<GooglePlacesAutocomplete placeholder: "R. José Paulino, 1234",
apiKey={process.env.REACT_APP_KEY_API} }}
apiOptions={{ language: "pt-br", region: "br" }} />
selectProps={{ </div>
className: "input-autocomplete", <div className="inputs-from-to">
placeholder: "R. José Paulino, 1234", <IonIcon icon={locationOutline}></IonIcon>
}} <GooglePlacesAutocomplete
/> apiKey={process.env.REACT_APP_KEY_API}
</div> apiOptions={{ language: "pt-br", region: "br" }}
<div className="inputs-from-to"> selectProps={{
<IonIcon icon={locationOutline}></IonIcon> className: "input-autocomplete",
<GooglePlacesAutocomplete placeholder: "PUC Campinas",
apiKey={process.env.REACT_APP_KEY_API} }}
apiOptions={{ language: "pt-br", region: "br" }} />
selectProps={{ </div>
className: "input-autocomplete", <div className="button-search">
placeholder: "PUC Campinas", <IonButton color="primary">Cadastrar</IonButton>
}} </div>
/> </div>
</div>
<IonList>
<IonRadioGroup
value={selected}
onIonChange={(e) => setSelected(e.detail.value)}
>
<IonListHeader>
<IonLabel>Name</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Biff</IonLabel>
<IonRadio slot="start" value="biff" />
</IonItem>
<IonItem>
<IonLabel>Griff</IonLabel>
<IonRadio slot="start" value="griff" />
</IonItem>
<IonItem>
<IonLabel>Buford</IonLabel>
<IonRadio slot="start" value="buford" />
</IonItem>
</IonRadioGroup>
</IonList>
<div className="button-search">
<IonButton color="primary">Cadastrar</IonButton>
</div>
</IonCardContent>
</IonCard>
</IonContent> </IonContent>
</IonPage> </IonPage>
); );