Merge pull request #1 from RicaRodz/newUiDesign

Dashboard Completed

package.json

@@ -12,6 +12,7 @@
     "@tanstack/react-query": "^5.49.2",
     "expo": "~51.0.17",
     "expo-constants": "~16.0.2",
+    "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.17",
     "expo-status-bar": "~1.12.1",

src/app/[name].jsx → src/app/(tabs)/[name].jsx

@@ -1,13 +1,13 @@
 import { View, Text, ScrollView, ActivityIndicator } from "react-native";
 import { useLocalSearchParams, Stack } from "expo-router";
-import exercises from "../../assets/data/exercises.json";
+import exercises from "../../../assets/data/exercises.json";
 import { StyleSheet } from "react-native";
 import { useState } from "react";
 import { gql } from "graphql-request";
 import { useQuery } from "@tanstack/react-query";
-import client from "../graphqlClient";
-import NewSetInput from "../components/newSetInput";
-import SetsList from "../components/SetsList";
+import client from "../../graphqlClient";
+import NewSetInput from "../../components/newSetInput";
+import SetsList from "../../components/SetsList";
 
 
 const exerciseQuery = gql`

src/app/(tabs)/_layout.jsx

@@ -0,0 +1,63 @@
+import { FontAwesome6 } from '@expo/vector-icons';
+import { FontAwesome5 } from '@expo/vector-icons';
+import { Octicons } from '@expo/vector-icons';
+import { FontAwesome } from '@expo/vector-icons';
+import { Tabs } from "expo-router";
+
+export default function TabLayout() {
+  return (
+    <Tabs screenOptions={{ tabBarActiveTintColor: "royalblue", headerShown: false }}>
+      {/* <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome size={28} name="home" color={color} />
+          ),
+        }}
+      /> */}
+      <Tabs.Screen
+        name="workouts"
+        options={{
+          title: "Workouts",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6 name="dumbbell" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="mealPlans"
+        options={{
+          title: "Meal Plan",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome5 name="utensils" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="reports"
+        options={{
+          title: "Progress",
+          tabBarIcon: ({ color }) => (
+            <Octicons name="graph" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: "Profile",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome name="user-circle-o" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="[name]"
+        options={{
+          href: null,
+        }}
+      />
+    </Tabs>
+  );
+}

src/app/(tabs)/getDate.jsx

@@ -0,0 +1,30 @@
+export function getDate() {
+  const date = new Date();
+  const day = date.getDate();
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const daysOfWeek = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+  const currentDayOfWeek = daysOfWeek[date.getDay()];
+  const currentMonth = months[date.getMonth()];
+  return `${currentDayOfWeek},${currentMonth},${day}`;
+}

src/app/(tabs)/index.js

@@ -0,0 +1,25 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  FlatList,
+  ActivityIndicator,
+} from "react-native";
+
+export default function HomeScreen() {
+  return <View style={styles.container}>
+
+
+
+
+
+  </View>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 10,
+  },
+});

src/app/(tabs)/mealPlans.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { View,  StyleSheet, Image, ScrollView } from 'react-native';
+
+const MealPlans = () => {
+
+
+  return (
+    <View style={styles.container}>
+
+
+    </View>
+  );
+};
+
+
+const styles = StyleSheet.create({
+
+
+});
+
+export default MealPlans;

src/app/(tabs)/profile.jsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+const profile = () => {
+  return (
+    <View>
+      <Text>profile</Text>
+    </View>
+  )
+}
+
+export default profile

src/app/(tabs)/reports.jsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+const reports = () => {
+  return (
+    <View>
+      <Text>reports</Text>
+    </View>
+  )
+}
+
+export default reports

src/app/(tabs)/workouts.jsx

@@ -0,0 +1,144 @@
+import { StyleSheet, Text, View, Pressable, ScrollView } from "react-native";
+import ExerciseListItem from "../../components/ExerciseListItem";
+import { useQuery } from "@tanstack/react-query";
+import { gql } from "graphql-request";
+import client from "../../graphqlClient";
+import { LinearGradient } from "expo-linear-gradient";
+import { useState } from "react";
+import DashboardInfo from "../../components/DashboardInfo";
+import { getDate } from "./getDate";
+
+const exercisesQuery = gql`
+  query MyQuery($muscle: String, $name: String) {
+    exercises(name: $name, muscle: $muscle) {
+      muscle
+      name
+      equipment
+    }
+  }
+`;
+
+export default function workouts() {
+  const [currentDate, setCurrentDate] = useState(getDate());
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Title */}
+      <Text style={styles.title}>Dashbord</Text>
+
+      <DashboardInfo />
+
+      {/* User Workouts */}
+      <View style={styles.workouts}>
+        {/* User Workouts Title + Show All */}
+        <View
+          style={{
+            flexDirection: "row",
+            padding: 15,
+            justifyContent: "space-between",
+          }}
+        >
+          <Text style={{ fontSize: 14, fontWeight: "500", color: "#676968" }}>
+            MY WORKOUTS
+          </Text>
+          <Text style={{ fontSize: 14, fontWeight: "500", color: "royalblue" }}>
+            Show All
+          </Text>
+        </View>
+
+        {/* Workouts Container */}
+        <View style={styles.cardContainer}>
+          <LinearGradient
+            colors={["#2d3799", "#2d2954"]}
+            start={[0.02, 0.01]}
+            style={styles.card}
+          >
+            <View
+              style={{ alignItems: "flex-start", justifyContent: "flex-start" }}
+            >
+              <Text style={{ fontSize: 25, fontWeight: "500", color: "white" }}>
+                Back & Shoulders
+              </Text>
+              <Text style={{ color: "lightgray" }}>{currentDate}</Text>
+            </View>
+
+            <View
+              style={{
+                flexDirection: "row",
+                paddingTop: 40,
+                justifyContent: "space-between",
+              }}
+            >
+              <View>
+                <Text
+                  style={{ textAlign: "center", color: "white", fontSize: 25 }}
+                >
+                  7
+                </Text>
+                <Text style={{ color: "lightgray" }}>times completed</Text>
+              </View>
+
+              <Pressable>
+                <LinearGradient
+                  colors={["#4459bb", "#35306a"]}
+                  start={[0, 0.1]}
+                  style={styles.button}
+                >
+                  <Text style={styles.text2}>START</Text>
+                </LinearGradient>
+              </Pressable>
+            </View>
+          </LinearGradient>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 64,
+  },
+  title: {
+    fontSize: 35,
+    fontWeight: "bold",
+    padding: 20,
+  },
+
+  workouts: {
+    padding: 10,
+  },
+  cardContainer: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.32,
+    shadowRadius: 5.46,
+    elevation: 9,
+  },
+  card: {
+    marginHorizontal: 10,
+    flex: 1,
+    borderRadius: 2,
+    padding: 25,
+  },
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: "black",
+  },
+  text2: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: "bold",
+    letterSpacing: 0.25,
+    color: "white",
+  },
+});

src/app/_layout.jsx

@@ -1,4 +1,4 @@
-import { Stack, Slot } from "expo-router";
+import { Stack, Slot, Tabs } from "expo-router";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 
 const client = new QueryClient();
@@ -7,7 +7,7 @@ export default function RootLayout() {
   return (
     <QueryClientProvider client={client} >
       <Stack>
-        <Stack.Screen name="index" options={{ title: "Exercises" }} />
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
     </QueryClientProvider>
   );