Ajuste das iontabs | Tela esboço de cadastro sem validação
This commit is contained in:
Hugo Falcao
46
src/App.tsx
46
src/App.tsx
@@ -1,8 +1,12 @@
|
|||||||
import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
|
|
||||||
import { IonReactRouter } from '@ionic/react-router';
|
|
||||||
import { Redirect, Route } from 'react-router-dom';
|
import { Redirect, Route } from 'react-router-dom';
|
||||||
import Menu from './components/Menu';
|
import {
|
||||||
import Page from './pages/Page';
|
IonApp,
|
||||||
|
IonRouterOutlet,
|
||||||
|
setupIonicReact
|
||||||
|
} from '@ionic/react';
|
||||||
|
import { IonReactRouter } from '@ionic/react-router';
|
||||||
|
import Cadastro from './pages/Cadastro';
|
||||||
|
import MainPages from './pages/MainPages';
|
||||||
|
|
||||||
/* Core CSS required for Ionic components to work properly */
|
/* Core CSS required for Ionic components to work properly */
|
||||||
import '@ionic/react/css/core.css';
|
import '@ionic/react/css/core.css';
|
||||||
@@ -25,24 +29,20 @@ import './theme/variables.css';
|
|||||||
|
|
||||||
setupIonicReact();
|
setupIonicReact();
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => (
|
||||||
return (
|
<IonApp>
|
||||||
<IonApp>
|
<IonReactRouter>
|
||||||
<IonReactRouter>
|
|
||||||
<IonSplitPane contentId="main">
|
<IonRouterOutlet>
|
||||||
<Menu />
|
<Route exact path="/mainpages" component={MainPages}></Route>
|
||||||
<IonRouterOutlet id="main">
|
<Route exact path="/cadastro" component={Cadastro}></Route>
|
||||||
<Route path="/" exact={true}>
|
<Route exact path="/">
|
||||||
<Redirect to="/page/Inbox" />
|
<Redirect to="/cadastro" />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/page/:name" exact={true}>
|
</IonRouterOutlet>
|
||||||
<Page />
|
|
||||||
</Route>
|
</IonReactRouter>
|
||||||
</IonRouterOutlet>
|
</IonApp>
|
||||||
</IonSplitPane>
|
);
|
||||||
</IonReactRouter>
|
|
||||||
</IonApp>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
19
src/components/Action.tsx
Normal file
19
src/components/Action.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { IonCol, IonRouterLink, IonRow } from "@ionic/react";
|
||||||
|
|
||||||
|
interface ComponentProps {
|
||||||
|
message: string,
|
||||||
|
link: string,
|
||||||
|
text: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Action = (props: ComponentProps) => (
|
||||||
|
|
||||||
|
<IonRow className="ion-text-center ion-justify-content-center">
|
||||||
|
<IonCol size="12">
|
||||||
|
<p>
|
||||||
|
{ props.message }
|
||||||
|
<IonRouterLink className="custom-link" routerLink={ props.link }> { props.text } →</IonRouterLink>
|
||||||
|
</p>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
);
|
||||||
17
src/components/Email.tsx
Normal file
17
src/components/Email.tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { IonModal, IonButton, IonContent } from '@ionic/react';
|
||||||
|
|
||||||
|
export const ModalExample: React.FC = () => {
|
||||||
|
const [showModal, setShowModal] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonContent>
|
||||||
|
<IonModal isOpen={showModal}>
|
||||||
|
<p>This is modal content</p>
|
||||||
|
<IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
|
||||||
|
</IonModal>
|
||||||
|
</IonContent>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalExample;
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container strong {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container p {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #8c8c8c;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import './ExploreContainer.css';
|
|
||||||
|
|
||||||
interface ContainerProps {
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
|
|
||||||
return (
|
|
||||||
<div className="container">
|
|
||||||
<strong>{name}</strong>
|
|
||||||
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExploreContainer;
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
ion-menu ion-content {
|
|
||||||
--background: var(--ion-item-background, var(--ion-background-color, #fff));
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-content {
|
|
||||||
--padding-start: 8px;
|
|
||||||
--padding-end: 8px;
|
|
||||||
--padding-top: 20px;
|
|
||||||
--padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-list {
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-note {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-list-header, ion-menu.md ion-note {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-list#inbox-list {
|
|
||||||
border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-list#inbox-list ion-list-header {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 600;
|
|
||||||
min-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-list#labels-list ion-list-header {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
color: #757575;
|
|
||||||
min-height: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-item {
|
|
||||||
--padding-start: 10px;
|
|
||||||
--padding-end: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-item.selected {
|
|
||||||
--background: rgba(var(--ion-color-primary-rgb), 0.14);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-item.selected ion-icon {
|
|
||||||
color: var(--ion-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-item ion-icon {
|
|
||||||
color: #616e7e;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.md ion-item ion-label {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-content {
|
|
||||||
--padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-list {
|
|
||||||
padding: 20px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-note {
|
|
||||||
line-height: 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-item {
|
|
||||||
--padding-start: 16px;
|
|
||||||
--padding-end: 16px;
|
|
||||||
--min-height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-item ion-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #73849a;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-item .selected ion-icon {
|
|
||||||
color: var(--ion-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-list#labels-list ion-list-header {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-list-header,
|
|
||||||
ion-menu.ios ion-note {
|
|
||||||
padding-left: 16px;
|
|
||||||
padding-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-menu.ios ion-note {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-note {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--ion-color-medium-shade);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-item.selected {
|
|
||||||
--color: var(--ion-color-primary);
|
|
||||||
}
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonIcon,
|
|
||||||
IonItem,
|
|
||||||
IonLabel,
|
|
||||||
IonList,
|
|
||||||
IonListHeader,
|
|
||||||
IonMenu,
|
|
||||||
IonMenuToggle,
|
|
||||||
IonNote,
|
|
||||||
} from '@ionic/react';
|
|
||||||
|
|
||||||
import { useLocation } from 'react-router-dom';
|
|
||||||
import { archiveOutline, archiveSharp, bookmarkOutline, heartOutline, heartSharp, mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, trashOutline, trashSharp, warningOutline, warningSharp } from 'ionicons/icons';
|
|
||||||
import './Menu.css';
|
|
||||||
|
|
||||||
interface AppPage {
|
|
||||||
url: string;
|
|
||||||
iosIcon: string;
|
|
||||||
mdIcon: string;
|
|
||||||
title: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const appPages: AppPage[] = [
|
|
||||||
{
|
|
||||||
title: 'Inbox',
|
|
||||||
url: '/page/Inbox',
|
|
||||||
iosIcon: mailOutline,
|
|
||||||
mdIcon: mailSharp
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Outbox',
|
|
||||||
url: '/page/Outbox',
|
|
||||||
iosIcon: paperPlaneOutline,
|
|
||||||
mdIcon: paperPlaneSharp
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Favorites',
|
|
||||||
url: '/page/Favorites',
|
|
||||||
iosIcon: heartOutline,
|
|
||||||
mdIcon: heartSharp
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Archived',
|
|
||||||
url: '/page/Archived',
|
|
||||||
iosIcon: archiveOutline,
|
|
||||||
mdIcon: archiveSharp
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Trash',
|
|
||||||
url: '/page/Trash',
|
|
||||||
iosIcon: trashOutline,
|
|
||||||
mdIcon: trashSharp
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Spam',
|
|
||||||
url: '/page/Spam',
|
|
||||||
iosIcon: warningOutline,
|
|
||||||
mdIcon: warningSharp
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
|
|
||||||
|
|
||||||
const Menu: React.FC = () => {
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonMenu contentId="main" type="overlay">
|
|
||||||
<IonContent>
|
|
||||||
<IonList id="inbox-list">
|
|
||||||
<IonListHeader>Inbox</IonListHeader>
|
|
||||||
<IonNote>hi@ionicframework.com</IonNote>
|
|
||||||
{appPages.map((appPage, index) => {
|
|
||||||
return (
|
|
||||||
<IonMenuToggle key={index} autoHide={false}>
|
|
||||||
<IonItem className={location.pathname === appPage.url ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>
|
|
||||||
<IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
|
|
||||||
<IonLabel>{appPage.title}</IonLabel>
|
|
||||||
</IonItem>
|
|
||||||
</IonMenuToggle>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</IonList>
|
|
||||||
|
|
||||||
<IonList id="labels-list">
|
|
||||||
<IonListHeader>Labels</IonListHeader>
|
|
||||||
{labels.map((label, index) => (
|
|
||||||
<IonItem lines="none" key={index}>
|
|
||||||
<IonIcon slot="start" icon={bookmarkOutline} />
|
|
||||||
<IonLabel>{label}</IonLabel>
|
|
||||||
</IonItem>
|
|
||||||
))}
|
|
||||||
</IonList>
|
|
||||||
</IonContent>
|
|
||||||
</IonMenu>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Menu;
|
|
||||||
3
src/pages/Cadastro.css
Normal file
3
src/pages/Cadastro.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
#nome-sobrenome{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
95
src/pages/Cadastro.tsx
Normal file
95
src/pages/Cadastro.tsx
Normal 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
59
src/pages/Home.tsx
Normal 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
46
src/pages/MainPages.tsx
Normal 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;
|
||||||
@@ -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;
|
|
||||||
Reference in New Issue
Block a user