update
This commit is contained in:
Philip Cesar Garay
@@ -0,0 +1,49 @@
|
||||
import { View } from "react-native";
|
||||
import React from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import EditInput from "./components/EditInput";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
|
||||
const ChangeEmailAddress = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 23,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
}}
|
||||
>
|
||||
<EditInput placeholder="Adresse mail" label="Adresse mail" />
|
||||
</BlurView>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Enregistrer les modifications"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeEmailAddress;
|
||||
@@ -0,0 +1,66 @@
|
||||
import { View, Text, Pressable } from "react-native";
|
||||
import React from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import EditInput from "./components/EditInput";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
|
||||
const ChangePassword = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<EditInput
|
||||
placeholder="Mot de passe"
|
||||
label="Mot de passe"
|
||||
type="password"
|
||||
/>
|
||||
<Pressable>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Mot de passe oublié?
|
||||
</Text>
|
||||
</Pressable>
|
||||
</BlurView>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Enregistrer les modifications"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangePassword;
|
||||
@@ -0,0 +1,72 @@
|
||||
import { View, Text, Image, TextInput } from "react-native";
|
||||
import React from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background, img } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { BlurView } from "expo-blur";
|
||||
import Style, { size } from "../../styles/Style";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { goBack } from "../../navigation/NavigationService";
|
||||
import EditInput from "./components/EditInput";
|
||||
|
||||
const EditProfile = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 2,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingVertical: 14,
|
||||
backgroundColor: Palette.glass,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
gap: 24,
|
||||
}}
|
||||
>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Image
|
||||
source={img.profile}
|
||||
style={{
|
||||
...size({ size: 108 }),
|
||||
borderRadius: 100,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Modifier la photo
|
||||
</Text>
|
||||
</View>
|
||||
<EditInput label="Pseudo" placeholder="Pseudo" />
|
||||
|
||||
<GradientButton
|
||||
title="Enregistrer les modifications"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
onPress={goBack}
|
||||
/>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditProfile;
|
||||
@@ -0,0 +1,96 @@
|
||||
import { View, Text, Pressable } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import Style, { size } from "../../styles/Style";
|
||||
|
||||
const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];
|
||||
|
||||
const Language = () => {
|
||||
const [selected, setSelected] = useState("Français");
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
backgroundColor: Palette.glass,
|
||||
gap: 10,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
}}
|
||||
>
|
||||
Langue
|
||||
</Text>
|
||||
<View style={{ gap: 12 }}>
|
||||
{LANGUAGE.map((item, index) => (
|
||||
<Pressable
|
||||
key={index}
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
onPress={() => setSelected(item)}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 17 }),
|
||||
...Style.containerCenter,
|
||||
borderWidth: 1,
|
||||
borderRadius: 100,
|
||||
borderColor: Palette.white,
|
||||
}}
|
||||
>
|
||||
{selected === item && (
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 9 }),
|
||||
borderRadius: 100,
|
||||
backgroundColor: Palette.white,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default Language;
|
||||
@@ -0,0 +1,65 @@
|
||||
import React from "reactn";
|
||||
import Page from "../../layouts/Page";
|
||||
import { gutters, Palette, Style } from "../../styles";
|
||||
import { background } from "../../assets";
|
||||
import { Text, View } from "react-native";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import Switch from "../../components/Switch";
|
||||
import { useState } from "react";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
|
||||
export default (props) => {
|
||||
const [isSwitch, setIsSwitch] = useState(false);
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
gap: 12,
|
||||
paddingVertical: 15,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
}}
|
||||
>
|
||||
<View style={Style.containerSpaceBetween}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
}}
|
||||
>
|
||||
Notifications
|
||||
</Text>
|
||||
<Switch value={isSwitch} setValue={setIsSwitch} />
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Nous t’encourageons à activer les notifications pour découvrir les
|
||||
derniers classements, les nouveaux sons et les meilleurs playbacks.
|
||||
</Text>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
@@ -1,12 +1,229 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Pressable,
|
||||
Image,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
} from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background, icons, img } from "../../assets";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import Style, { gutters, size } from "../../styles/Style";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import BorderGradient from "../../components/BorderGradient/BorderGradient";
|
||||
import MusicCard from "../Library/components/MusicCard";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { navigate } from "../../navigation/NavigationService";
|
||||
import { Routes } from "../../navigation";
|
||||
|
||||
const Profile = () => {
|
||||
const [selected, setSelected] = useState("Chansons");
|
||||
|
||||
const onPressMenu = (item) => {
|
||||
setSelected(item);
|
||||
};
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>Profile</Text>
|
||||
</View>
|
||||
<Page
|
||||
backgroundImg={background.profileBG}
|
||||
headerType="NAVIGATE"
|
||||
hideBackButton
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 2,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
rightComponent={() => (
|
||||
<Pressable onPress={() => SheetManager.show("ProfileSettings")}>
|
||||
<Image source={icons.more} />
|
||||
</Pressable>
|
||||
)}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
|
||||
<View style={{ borderRadius: 20, overflow: "hidden" }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingVertical: 14,
|
||||
backgroundColor: Palette.glass,
|
||||
paddingHorizontal: 20,
|
||||
}}
|
||||
>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Image
|
||||
source={img.profile}
|
||||
style={{
|
||||
...size({ size: 108 }),
|
||||
borderRadius: 100,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
elia.mrn
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>0</Text>
|
||||
<Text style={styles.label}>playbacks</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>880</Text>
|
||||
<Text style={styles.label}>abonnés</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>6</Text>
|
||||
<Text style={styles.label}>abonnements</Text>
|
||||
</View>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Suivre"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
marginTop: 18,
|
||||
}}
|
||||
/>
|
||||
</BlurView>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
{["Chansons", "Playbacks", "Clips"].map((item, index) => (
|
||||
<Pressable
|
||||
key={index}
|
||||
onPress={() => onPressMenu(item)}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<BorderGradient
|
||||
gradientProps={{
|
||||
colors:
|
||||
selected === item
|
||||
? ["#FFFFFF00", "#FFFFFF"]
|
||||
: [Palette.tran, Palette.tran],
|
||||
locations: [0, 1],
|
||||
start: { x: 0, y: 0 },
|
||||
end: { x: 1, y: 0 },
|
||||
}}
|
||||
style={styles.borderGradient}
|
||||
/>
|
||||
<View style={styles.blurContainer}>
|
||||
<BlurView intensity={20} style={styles.blurView}>
|
||||
<Text style={styles.menu}>{item}</Text>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
{selected === "Playbacks" && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
data={Array.from({ length: 6 })}
|
||||
numColumns={3}
|
||||
contentContainerStyle={{ gap: 14 }}
|
||||
columnWrapperStyle={{ gap: 10 }}
|
||||
renderItem={() => (
|
||||
<Pressable
|
||||
style={{ flex: 1, gap: 6 }}
|
||||
onPress={() => navigate(Routes.Reels)}
|
||||
>
|
||||
<Image
|
||||
source={img.placeholder3}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 147,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Pour Lili
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{selected === "Chansons" && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
data={Array.from({ length: 3 })}
|
||||
contentContainerStyle={{
|
||||
gap: 10,
|
||||
}}
|
||||
renderItem={() => (
|
||||
<MusicCard
|
||||
onPress={() =>
|
||||
navigate(Routes.MusicDetails, {
|
||||
action: "userProfile",
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
value: {
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
label: {
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
menu: {
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
borderGradient: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
height: 33,
|
||||
position: "absolute",
|
||||
zIndex: 1,
|
||||
width: "100%",
|
||||
},
|
||||
blurContainer: {
|
||||
height: 33,
|
||||
zIndex: -1,
|
||||
borderRadius: 10,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
},
|
||||
blurView: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
paddingHorizontal: 10,
|
||||
...Style.containerCenter,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
import { View, Text, Pressable, Image } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { icons, img } from "../../assets";
|
||||
import Style, { gutters, size } from "../../styles/Style";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { goBack } from "../../navigation/NavigationService";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const Reels = () => {
|
||||
const { top } = useSafeAreaInsets();
|
||||
const [isFav, setIsFav] = useState(false);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
position: "absolute",
|
||||
top: top + 10,
|
||||
zIndex: 1,
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Pressable onPress={goBack}>
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={{
|
||||
...size({ size: 15 }),
|
||||
transform: [{ rotate: "90deg" }],
|
||||
}}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Mon Profile
|
||||
</Text>
|
||||
<View style={{ flex: 1, alignItems: "flex-end" }}>
|
||||
<Pressable onPress={() => SheetManager.show("DeletePlayback")}>
|
||||
<Image source={icons.trash} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
<Image
|
||||
source={img.placeholder3}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 1,
|
||||
bottom: gutters * 2,
|
||||
right: 33,
|
||||
gap: 20,
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={() => setIsFav(!isFav)}>
|
||||
<Image
|
||||
source={isFav ? icons.heart : icons.heartOutline}
|
||||
style={size({ size: 26 })}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable>
|
||||
<Image
|
||||
source={icons.share}
|
||||
style={size({ size: 26 })}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Reels;
|
||||
@@ -0,0 +1,82 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import BlurItemButton from "../../components/BlurItemButton";
|
||||
import BorderGradientButton from "../../components/BorderGradientButton";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { navigate } from "../../navigation/NavigationService";
|
||||
import { Routes } from "../../navigation";
|
||||
|
||||
const SETTINGS = [
|
||||
{
|
||||
title: "Adresse mail",
|
||||
action: () => {
|
||||
navigate(Routes.ChangeEmailAddress);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Modifier mon mot de passe",
|
||||
action: () => {
|
||||
navigate(Routes.ChangePassword);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
action: () => {
|
||||
navigate(Routes.Notifications);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Langue",
|
||||
action: () => {
|
||||
navigate(Routes.Language);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Gérer mon abonnement",
|
||||
action: () => {},
|
||||
},
|
||||
];
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATION"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 2,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<View style={{ flex: 1, gap: 10 }}>
|
||||
{SETTINGS.map((item, index) => (
|
||||
<BlurItemButton
|
||||
key={index}
|
||||
title={item.title}
|
||||
onPress={item.action}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={{ width: "80%", gap: 5, alignSelf: "center" }}>
|
||||
<BorderGradientButton title="Déconnexion" />
|
||||
<BorderGradientButton
|
||||
title="Supprimer mon profil"
|
||||
titleStyle={{
|
||||
color: Palette.red,
|
||||
}}
|
||||
onPress={() => SheetManager.show("DeleteAccount")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -0,0 +1,72 @@
|
||||
import { View, Text, TextInput, Image, Pressable } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import { Palette, Style } from "../../../styles";
|
||||
import { FONT_FAMILY } from "../../../styles/Fonts";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { icons } from "../../../assets";
|
||||
|
||||
const EditInput = ({ label = "", placeholder = "", type = "default" }) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<View style={{ gap: 4 }}>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerSpaceBetween,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Modifier
|
||||
</Text>
|
||||
</View>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 12,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: "hidden",
|
||||
height: 52,
|
||||
...Style.containerRow,
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={Palette.gray}
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
flex: 1,
|
||||
}}
|
||||
keyboardType={type}
|
||||
{...(type === "password" && {
|
||||
secureTextEntry: !showPassword,
|
||||
})}
|
||||
/>
|
||||
{type === "password" && (
|
||||
<Pressable onPress={() => setShowPassword(!showPassword)}>
|
||||
<Image source={icons.eye} />
|
||||
</Pressable>
|
||||
)}
|
||||
</BlurView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditInput;
|
||||
Reference in New Issue
Block a user