Commit 93813eec authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Se detalló la página de edición de perfil

parent ff40e1f6

mobile/src/screens/account/account_page.tsx

+46 −44
Original line number Diff line number Diff line
@@ -8,9 +8,13 @@ import { 
} from "react-native";

import { useAuth } from "../../contexts/auth_context";

import { CircleAvatar } from "../../components/circle_avatar/circle_avatar";

import { MaterialIcons } from "@expo/vector-icons";

import { LIGTHT_THEME } from "../../constants/theme";

import { ReactNode } from "react";

import {

  MaterialIcons,

  MaterialCommunityIcons,

  FontAwesome,

} from "@expo/vector-icons";

import { CustomTileButton } from "../../components/custom_tile_button/custom_tile_button";

import { router } from "expo-router";



//TODO: Add source to CircleAvatar

const source = require("../../../assets/avatar.png");
@@ -21,37 +25,41 @@ export const AccountPage = () => { 
    <View style={styles.container}>

      <View style={styles.profilePhotoContainer}>

        <CircleAvatar size={120} source={source} />

        <Text>{user?.name + " " + user?.lastName}</Text>

        <Text style={styles.user_name}>

          {user?.name + " " + user?.lastName}

        </Text>

      </View>

      <View style={{ height: 30 }}/>



      <View

        style={{

          flex: 2

        }}

      >

        <CustomTileButton

        title="Logout"

        onPress={logout}

        leadingIcon={<MaterialIcons name="logout" size={24} color="black" />}

          title="Edit user data"

          leadingIcon={

            <MaterialCommunityIcons

              name="account-edit"

              size={24}

              color="black"

            />

    </View>

  );

};



interface CustomTileButtonProps {

  leadingIcon: ReactNode;

  title: string;

  onPress: () => void;

          }

          onPress={() => router.push("/profile/edit")}

        />

        <CustomTileButton

          title="Change my tastes"

          leadingIcon={<FontAwesome name="edit" size={24} color="black" />}

        />

          

const CustomTileButton = ({

  title,

  onPress,

  leadingIcon,

}: CustomTileButtonProps) => {

  return (

    <TouchableOpacity onPress={onPress} style={styles.account_option}>

      <View style={{ flexDirection: "row", gap: 20, alignItems: "center" }}>

        {leadingIcon}

        <Text>{title}</Text>

      </View>

      <MaterialIcons name="keyboard-arrow-right" size={30} color="black" />

    </TouchableOpacity>

      <CustomTileButton

            title="Logout"

            onPress={logout}

            leadingIcon={

              <MaterialIcons name="logout" size={24} color="black" />

            }

          />

    </View>

  );

};
@@ -60,22 +68,16 @@ const styles = StyleSheet.create({ 
    flex: 1,

    alignItems: "center",

    padding: 20,

    gap: 5,

    backgroundColor: "#f5f5f5",

  },

  account_option: {

    flexDirection: "row",

  profilePhotoContainer: {

    alignItems: "center",

    justifyContent: "space-between",

    height: 50,

    paddingHorizontal: 10,

    borderTopWidth: 1,

    borderTopColor: "#ccc",

    backgroundColor: LIGTHT_THEME.color.white,

    borderRadius: 5,

    justifyContent: "center",

    width: "100%",

    flex: 1

  },

  user_name: {

    fontSize: 18,

    fontWeight: "bold",

  },

  profilePhotoContainer: {

    alignItems: 'center'

  }

});