create-workout WIP

frontend/app/home.tsx

@@ -1,8 +1,10 @@
-import { View, TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text, ScrollView, SafeAreaView } from 'react-native';
 import { Stack, useRouter } from 'expo-router';
 import React from 'react';
 import ProfileButton from '../components/ProfileButton';
 import styles from '../styles';
+import Card from '../components/Card';
+import AddCard from '../components/AddCard';
 
 const HomeScreen = () => {
   const router = useRouter();
@@ -15,14 +17,26 @@ const HomeScreen = () => {
           ),
         }}
       />
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         <TouchableOpacity style={styles.buttonContainer} onPress={() => {}}>
           <Text style={styles.buttonText}>Start Workout</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.buttonContainer} onPress={() => {}}>
           <Text style={styles.buttonText}>Create Workout</Text>
         </TouchableOpacity>
-      </View>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.cardsContainer}
+        >
+          <Card>
+            <Text style={styles.buttonText}>Workout 1</Text>
+          </Card>
+          <TouchableOpacity onPress={() => router.push('workout/create')}>
+            <AddCard />
+          </TouchableOpacity>
+        </ScrollView>
+      </SafeAreaView>
     </>
   );
 };

frontend/app/login.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useRouter } from 'expo-router';
-import { View, Text, TextInput, TouchableOpacity } from 'react-native';
+import { Text, TextInput, TouchableOpacity, SafeAreaView } from 'react-native';
 import customFetch from '../customFetch';
 import styles from '../styles';
 
@@ -29,7 +29,7 @@ const LoginScreen = () => {
   };
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.title}>Login</Text>
       <TextInput
         style={styles.input}
@@ -53,7 +53,7 @@ const LoginScreen = () => {
       <TouchableOpacity style={styles.buttonContainer} onPress={handleLogin}>
         <Text style={styles.buttonText}>Login</Text>
       </TouchableOpacity>
-    </View>
+    </SafeAreaView>
   );
 };
 

frontend/app/workout/create.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import {
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  SafeAreaView,
+} from 'react-native';
+import styles from '../../styles';
+import AddExerciseModal from '../../components/AddExcerciseModal';
+import Card from '../../components/Card';
+import AddCard from '../../components/AddCard';
+
+const CreateWorkout = () => {
+  const [name, setName] = useState('');
+  const [exercises, setExercises] = useState([]);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleSubmit = () => {
+    // Handle the form submission here
+    // For example, you can call an API to create a workout
+  };
+
+  const handleAddExercise = (exercise) => {
+    setExercises([...exercises, exercise]);
+    setModalVisible(false);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Create a New Workout</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="Workout Name"
+        value={name}
+        onChangeText={setName}
+      />
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        {exercises.map((exercise, index) => (
+          <Card key={index}>
+            <Text style={styles.buttonText}>{exercise.name}</Text>
+            <Text style={styles.buttonText}>{exercise.reps}</Text>
+            <Text style={styles.buttonText}>{exercise.sets}</Text>
+          </Card>
+        ))}
+        <TouchableOpacity onPress={() => setModalVisible(true)}>
+          <AddCard />
+        </TouchableOpacity>
+      </ScrollView>
+      <TouchableOpacity style={styles.buttonContainer} onPress={handleSubmit}>
+        <Text style={styles.buttonText}>Create Workout</Text>
+      </TouchableOpacity>
+      <AddExerciseModal
+        modalVisible={modalVisible}
+        onClose={() => setModalVisible(false)}
+        onAddExercise={handleAddExercise}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default CreateWorkout;

frontend/components/AddCard.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MaterialIcons } from '@expo/vector-icons';
+
+import Card from './Card';
+
+const AddCard = () => {
+  return (
+    <Card>
+      <MaterialIcons name="add" size={42} color="black" />
+    </Card>
+  );
+};
+
+export default AddCard;

frontend/components/AddExcerciseModal.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Modal, Text, TextInput, TouchableOpacity } from 'react-native';
+import styles from '../styles';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const AddExerciseModal = ({ modalVisible, onClose, onAddExercise }) => {
+  const [name, setName] = useState('');
+  const [reps, setReps] = useState('');
+  const [sets, setSets] = useState('');
+
+  return (
+    <Modal
+      visible={modalVisible}
+      onRequestClose={onClose}
+      animationType="slide"
+    >
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.title}>Add a New Exercise</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Exercise Name"
+          value={name}
+          onChangeText={setName}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Reps"
+          value={reps}
+          onChangeText={setReps}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Sets"
+          value={sets}
+          onChangeText={setSets}
+        />
+        <TouchableOpacity
+          style={styles.buttonContainer}
+          onPress={() => onAddExercise({ name, reps, sets })}
+        >
+          <Text style={styles.buttonText}>Add Exercise</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.buttonContainer} onPress={onClose}>
+          <Text style={styles.buttonText}>Cancel</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+export default AddExerciseModal;

frontend/components/Card.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from '../styles';
+
+const Card = ({ children }) => {
+  return <View style={styles.card}>{children}</View>;
+};
+
+export default Card;

frontend/styles/index.js

@@ -23,6 +23,18 @@ const styles = StyleSheet.create({
     padding: 16,
     backgroundColor: COLORS.backgroundColor1,
   },
+  cardsContainer: {
+    paddingVertical: 16,
+  },
+  card: {
+    width: 100,
+    height: 100,
+    margin: 10,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.interactiveColor2,
+  },
   title: {
     fontSize: 24,
     fontWeight: 'bold',