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