changed App title, created button

capacitor.config.json

@@ -1,6 +1,6 @@
 {
   "appId": "io.ionic.starter",
-  "appName": "myApp",
+  "appName": "Turtle",
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "build",

ionic.config.json

@@ -1,5 +1,5 @@
 {
-  "name": "myApp",
+  "name": "Turtle",
   "integrations": {
     "capacitor": {}
   },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "myApp",
+  "name": "Turtle",
   "version": "0.0.1",
   "private": true,
   "dependencies": {

src/App.tsx

@@ -27,8 +27,7 @@ const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
-        <Route path="/home" component={Home} exact={true} />
+        <Route exact path="/" component={Home} />
-        <Route exact path="/" render={() => <Redirect to="/home" />} />
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>

src/components/ExploreContainer.css

@@ -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;
-}

src/components/ExploreContainer.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import './ExploreContainer.css';
-
-interface ContainerProps { }
-
-const ExploreContainer: React.FC<ContainerProps> = () => {
-  return (
-    <div className="container">
-      <strong>Ready to create an app?</strong>
-      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  );
-};
-
-export default ExploreContainer;

src/pages/Home.css

@@ -0,0 +1,14 @@
+ion-button {
+  text-align: center;
+  justify-content: center;
+  margin: 30% 10% 0 10%;
+  width: 100%;
+}
+
+ion-toolbar {
+  text-align: center;
+}
+
+ion-grid {
+  max-width: 500px;
+}

src/pages/Home.tsx

@@ -1,23 +1,23 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonGrid, IonRow } from '@ionic/react';
 import React from 'react';
-import ExploreContainer from '../components/ExploreContainer';
 import './Home.css';
 
 const Home: React.FC = () => {
+  async function handleSubmit() {}
+
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Blank</IonTitle>
+          <IonTitle>Turtle</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <IonHeader collapse="condense">
+        <IonGrid>
-          <IonToolbar>
+          <IonRow>
-            <IonTitle size="large">Blank</IonTitle>
+            <IonButton onSubmit={handleSubmit}>Create Room</IonButton>
-          </IonToolbar>
+          </IonRow>
-        </IonHeader>
+        </IonGrid>
-        <ExploreContainer />
       </IonContent>
     </IonPage>
   );