alex/uplifting-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

template all pages

Browse Source
This commit is contained in:
Alexander Ng
2026-01-09 16:54:14 -08:00
parent 4c7cfe4136
commit c5ca241e7c
11 changed files with 117 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/App.tsx
View File

@@ -9,11 +9,8 @@ import {
setupIonicReact,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { ellipse, square, triangle } from "ionicons/icons";
import { barbell, people, person, settings, statsChart } from "ionicons/icons";
import { Redirect, Route } from "react-router-dom";
import Tab1 from "./pages/Tab1";
import Tab2 from "./pages/Tab2";
import Tab3 from "./pages/Tab3";
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
@@ -45,6 +42,13 @@ import "@ionic/react/css/palettes/dark.system.css";
/* Theme variables */
import "./theme/variables.css";
/* Pages */
import Friends from "./pages/friends/Friends";
import Me from "./pages/me/Me";
import Settings from "./pages/settings/Settings";
import Stats from "./pages/stats/Stats";
import Workout from "./pages/workout/Workout";
setupIonicReact();
const App: React.FC = () => (
@@ -52,31 +56,45 @@ const App: React.FC = () => (
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route exact path="/tab1">
<Tab1 />
<Route exact path="/me">
<Me />
</Route>
<Route exact path="/tab2">
<Tab2 />
<Route exact path="/friends">
<Friends />
</Route>
<Route path="/tab3">
<Tab3 />
<Route exact path="/workout">
<Workout />
</Route>
<Route exact path="/stats">
<Stats />
</Route>
<Route exact path="/settings">
<Settings />
</Route>
<Route exact path="/">
<Redirect to="/tab1" />
<Redirect to="/me" />
</Route>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1">
<IonIcon aria-hidden="true" icon={triangle} />
<IonLabel>Tab 1</IonLabel>
<IonTabButton tab="me" href="/me">
<IonIcon aria-hidden="true" icon={person} />
<IonLabel>Me</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tab2">
<IonIcon aria-hidden="true" icon={ellipse} />
<IonLabel>Tab 2</IonLabel>
<IonTabButton tab="friends" href="/friends">
<IonIcon aria-hidden="true" icon={people} />
<IonLabel>Friends</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tab3">
<IonIcon aria-hidden="true" icon={square} />
<IonLabel>Tab 3</IonLabel>
<IonTabButton tab="workout" href="/workout">
<IonIcon aria-hidden="true" icon={barbell} />
<IonLabel>Workout</IonLabel>
</IonTabButton>
<IonTabButton tab="stats" href="/stats">
<IonIcon aria-hidden="true" icon={statsChart} />
<IonLabel>Stats</IonLabel>
</IonTabButton>
<IonTabButton tab="settings" href="/settings">
<IonIcon aria-hidden="true" icon={settings} />
<IonLabel>Settings</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>

0
src/pages/Tab1.css → src/pages/friends/Friends.css
View File

16
src/pages/Tab1.tsx → src/pages/friends/Friends.tsx
View File

@@ -5,27 +5,25 @@ import {
IonTitle,
IonToolbar,
} from "@ionic/react";
import ExploreContainer from "../components/ExploreContainer";
import "./Tab1.css";
import ExploreContainer from "../../components/ExploreContainer";
import "./Friends.css";
const Tab1: React.FC = () => {
export default function Friends() {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 1</IonTitle>
<IonTitle>Friends</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Tab 1</IonTitle>
<IonTitle size="large">Friends</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 1 page" />
<ExploreContainer name="Friends page" />
</IonContent>
</IonPage>
);
};
export default Tab1;
}

0
src/pages/Tab2.css → src/pages/me/Me.css
View File

16
src/pages/Tab2.tsx → src/pages/me/Me.tsx
View File

@@ -5,27 +5,25 @@ import {
IonTitle,
IonToolbar,
} from "@ionic/react";
import ExploreContainer from "../components/ExploreContainer";
import "./Tab2.css";
import ExploreContainer from "../../components/ExploreContainer";
import "./Me.css";
const Tab2: React.FC = () => {
export default function Me() {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 2</IonTitle>
<IonTitle>Me</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Tab 2</IonTitle>
<IonTitle size="large">Me</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 2 page" />
<ExploreContainer name="Me page" />
</IonContent>
</IonPage>
);
};
export default Tab2;
}

0
src/pages/Tab3.css → src/pages/settings/Settings.css
View File

16
src/pages/Tab3.tsx → src/pages/settings/Settings.tsx
View File

@@ -5,27 +5,25 @@ import {
IonTitle,
IonToolbar,
} from "@ionic/react";
import ExploreContainer from "../components/ExploreContainer";
import "./Tab3.css";
import ExploreContainer from "../../components/ExploreContainer";
import "./Settings.css";
const Tab3: React.FC = () => {
export default function Settings() {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 3</IonTitle>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Tab 3</IonTitle>
<IonTitle size="large">Settings</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 3 page" />
<ExploreContainer name="Settings page" />
</IonContent>
</IonPage>
);
};
export default Tab3;
}

0
src/pages/stats/Stats.css Normal file
View File

29
src/pages/stats/Stats.tsx Normal file
View File

@@ -0,0 +1,29 @@
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
} from "@ionic/react";
import ExploreContainer from "../../components/ExploreContainer";
import "./Stats.css";
export default function Stats() {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Stats</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Stats</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Stats page" />
</IonContent>
</IonPage>
);
}

0
src/pages/workout/Workout.css Normal file
View File

29
src/pages/workout/Workout.tsx Normal file
View File

@@ -0,0 +1,29 @@
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
} from "@ionic/react";
import ExploreContainer from "../../components/ExploreContainer";
import "./Workout.css";
export default function Workout() {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Workout</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Workout</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Workout page" />
</IonContent>
</IonPage>
);
}