diff --git a/src/App.tsx b/src/App.tsx index 79cbd2c..5b3a726 100644 --- a/src/App.tsx +++ b/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 Menu from './components/Menu'; -import Page from './pages/Page'; +import { + 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 */ import '@ionic/react/css/core.css'; @@ -25,24 +29,20 @@ import './theme/variables.css'; setupIonicReact(); -const App: React.FC = () => { - return ( - - - - - - - - - - - - - - - - ); -}; +const App: React.FC = () => ( + + + + + + + + + + + + + +); export default App; diff --git a/src/components/Action.tsx b/src/components/Action.tsx new file mode 100644 index 0000000..2509d60 --- /dev/null +++ b/src/components/Action.tsx @@ -0,0 +1,19 @@ +import { IonCol, IonRouterLink, IonRow } from "@ionic/react"; + +interface ComponentProps { + message: string, + link: string, + text: string +} + +export const Action = (props: ComponentProps) => ( + + + +

+ { props.message } + { props.text } → +

+ + +); \ No newline at end of file diff --git a/src/components/Email.tsx b/src/components/Email.tsx new file mode 100644 index 0000000..2902def --- /dev/null +++ b/src/components/Email.tsx @@ -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 ( + + +

This is modal content

+ setShowModal(false)}>Close Modal + + + ); +}; + +export default ModalExample; \ No newline at end of file diff --git a/src/components/ExploreContainer.css b/src/components/ExploreContainer.css deleted file mode 100644 index e99f514..0000000 --- a/src/components/ExploreContainer.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/ExploreContainer.tsx b/src/components/ExploreContainer.tsx deleted file mode 100644 index 354df7b..0000000 --- a/src/components/ExploreContainer.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import './ExploreContainer.css'; - -interface ContainerProps { - name: string; -} - -const ExploreContainer: React.FC = ({ name }) => { - return ( -
- {name} -

Explore UI Components

-
- ); -}; - -export default ExploreContainer; diff --git a/src/components/Menu.css b/src/components/Menu.css deleted file mode 100644 index 0ca47a2..0000000 --- a/src/components/Menu.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx deleted file mode 100644 index 7024a26..0000000 --- a/src/components/Menu.tsx +++ /dev/null @@ -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 ( - - - - Inbox - hi@ionicframework.com - {appPages.map((appPage, index) => { - return ( - - - - {appPage.title} - - - ); - })} - - - - Labels - {labels.map((label, index) => ( - - - {label} - - ))} - - - - ); -}; - -export default Menu; diff --git a/src/pages/Cadastro.css b/src/pages/Cadastro.css new file mode 100644 index 0000000..912ec27 --- /dev/null +++ b/src/pages/Cadastro.css @@ -0,0 +1,3 @@ +#nome-sobrenome{ + display: flex; +} \ No newline at end of file diff --git a/src/pages/Cadastro.tsx b/src/pages/Cadastro.tsx new file mode 100644 index 0000000..b745608 --- /dev/null +++ b/src/pages/Cadastro.tsx @@ -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 ( + + + + + + + + + + + + + Como você deseja se cadastrar? + + + {/* + + Continuar com Facebook + + + + Continuar com e-mail + */} + + +
+ + Nome + + + + Sobrenome + + +
+ + + E-mail + + + + + Data de nascimento + + + + + Senha + + + + Confirme a senha + + + + Cadastrar-se + + + + Ao se cadastrar, você aceita nossos Termos e Condições e nossa Política de Privacidade. + + + + + + ); +}; + +export default Cadastro; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..2169533 --- /dev/null +++ b/src/pages/Home.tsx @@ -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 ( + + + + + + Como você deseja se cadastrar? + + + + +
+ + Nome + + + + Sobrenome + + +
+ + + E-mail + + + + + Data de nascimento + + + + + Senha + + + + Confirme a senha + + + + Cadastrar-se + + + + Ao se cadastrar, você aceita nossos Termos e Condições e nossa Política de Privacidade. + + + + + + ); +}; + +export default Home; diff --git a/src/pages/MainPages.tsx b/src/pages/MainPages.tsx new file mode 100644 index 0000000..3803212 --- /dev/null +++ b/src/pages/MainPages.tsx @@ -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 ( + + + + + + } /> + + + + + + Buscar + + + + Home + + + + Perfil + + + + ) +} + +export default MainPages; \ No newline at end of file diff --git a/src/pages/Page.css b/src/pages/Page.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx deleted file mode 100644 index 24ac77a..0000000 --- a/src/pages/Page.tsx +++ /dev/null @@ -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 ( - - - - - - - {name} - - - - - - - {name} - - - - - - ); -}; - -export default Page;