verstka

src/screens/ProfileScreen/ProfileScreen.tsx

@@ -1,14 +1,197 @@
-import {Button, Text, View} from "react-native";
+import {Button, Text, View, StyleSheet, TouchableOpacity, Image, ScrollView} from "react-native";
 import {useAppDispatch} from "../../redux/store";
 import * as process from "process";
+import {responsiveFontSize, responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {background, blue, gray} from "../../css/colors";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import DText from "../../components/DText/DText";
+import DTitle from "../../components/DTitle/DTitle";
+import {ScreenStackHeaderLeftView} from "react-native-screens";
+import Separator from "../../components/Separator/Separator";
+import {BottomSheetModal} from "@gorhom/bottom-sheet";
+import {useMemo, useRef, useState} from "react";
 
-function ProfileScreen() {
-
+type SettingsElementProps = {
+    icon: any;
+    title: string;
+}
+const SettingsElement: React.FC<SettingsElementProps> = ({icon, title}) => {
     return (
-        <View>
-            <Text style={{fontSize: 36}}>Profile</Text>
+        <TouchableOpacity>
+
+            <View style={styles.actionsCarouselElementContainer}>
+                <View style={styles.actionsCarouselImageWrapper}>
+                    <Image style={styles.actionsCarouselImage} source={icon}/>
+                </View>
+                <DText>{title}</DText>
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+type HistoryElementProps = {
+    cost: number;
+    description: string;
+    color: string;
+}
+const HistoryElement: React.FC<HistoryElementProps> = ({cost, description, color}) => {
+    const formatNumber = (n: number): string => n >= 0 ? `+${n}` : `${n}`;
+    return (
+        <View style={styles.historyElementContainer}>
+            <DText style={{
+                fontSize: responsiveFontSize(2),
+                color: color,
+                fontWeight: "500"
+            }}>{formatNumber(cost)} руб</DText>
+            <DText style={{fontSize: responsiveFontSize(1.5), color: gray, fontWeight: "400"}}>{description}</DText>
         </View>
     )
 }
 
+function ProfileScreen() {
+    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+    const snapPoints = useMemo(() => ['25%', '40%'], []);
+    const [modalVisible, setModalVisible] = useState(false);
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <View style={styles.headerInfo}>
+                    <DTitle style={styles.headerText}>Ваш баланс: 228 руб</DTitle>
+                    <DTitle style={styles.headerText}>Собрано товаров: 1337 шт</DTitle>
+                </View>
+
+            </View>
+            <View style={styles.content}>
+                <View style={styles.actionsCarouselContainer}>
+                    <ScrollView horizontal={true}
+                                showsVerticalScrollIndicator={false}
+                                showsHorizontalScrollIndicator={false}
+                                contentContainerStyle={styles.actionsCarousel}
+                    >
+                        <SettingsElement icon={require('assets/icons/settings/withdraw.png')} title={'Вывод'}/>
+                        <SettingsElement icon={require('assets/icons/settings/statistics.png')} title={'Статистика'}/>
+                        <SettingsElement icon={require('assets/icons/settings/printer.png')} title={'Принтеры'}/>
+                    </ScrollView>
+                </View>
+                <Separator/>
+                <View style={styles.historyContainer}>
+                    <DTitle>История операций</DTitle>
+                    <ScrollView
+                        showsHorizontalScrollIndicator={false}
+                        showsVerticalScrollIndicator={false}
+                        style={styles.historyElements}
+                        contentContainerStyle={styles.historyElementsContainer}>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                    </ScrollView>
+                </View>
+            </View>
+            <BottomSheetModal ref={bottomSheetModalRef}
+                              snapPoints={snapPoints}
+                              onDismiss={() => {
+                                  setModalVisible(false);
+                              }}
+            >
+                <View style={{flex: 1}}>
+                    <DText>хуй</DText>
+                </View>
+            </BottomSheetModal>
+
+            <View style={[styles.overlay, {display: modalVisible ? 'flex' : 'none'}]}/>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        // backgroundColor: "red",
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,  // Это заполнит родительский элемент абсолютным позиционированием
+        backgroundColor: 'rgba(104, 104, 104, 0.50)',
+        zIndex: 2,  // Значение zIndex больше, чем у content, поэтому overlay будет выше
+    },
+    historyElementContainer: {
+        width: "100%",
+        backgroundColor: "white",
+        borderRadius: RFPercentage(2),
+        padding: RFPercentage(2),
+        elevation: 1
+    },
+    historyContainer: {
+        paddingVertical: responsiveHeight(2),
+        flex: 1,
+        // backgroundColor: "red"
+    },
+    historyElements: {
+        marginTop: responsiveHeight(3),
+    },
+    historyElementsContainer: {
+        rowGap: responsiveHeight(2),
+    },
+    header: {
+        backgroundColor: blue,
+        borderBottomLeftRadius: RFPercentage(3),
+        borderBottomRightRadius: RFPercentage(3),
+        elevation: 10,
+        paddingHorizontal: responsiveWidth(5),
+        paddingVertical: responsiveHeight(3),
+        color: "white",
+        display: "flex",
+        flexDirection: "row"
+    },
+    headerText: {
+        color: "white"
+    },
+    headerInfo: {
+        // backgroundColor: "red"
+    },
+    actionsCarousel: {
+        flexDirection: "row",
+        columnGap: responsiveWidth(3),
+    },
+    actionsCarouselContainer: {
+        // backgroundColor: "red",
+        paddingVertical: responsiveHeight(5)
+    },
+    actionsCarouselImage: {
+        resizeMode: "contain",
+        flex: 1,
+        width: "100%",
+        height: "100%",
+    },
+    actionsCarouselImageWrapper: {
+        width: RFPercentage(10),
+        height: RFPercentage(10),
+        backgroundColor: "white",
+        borderRadius: 100,
+        borderWidth: RFPercentage(0.3),
+        padding: RFPercentage(1),
+        justifyContent: "center",
+        alignItems: "center"
+
+    },
+    actionsCarouselElementContainer: {
+        display: "flex",
+        alignItems: "center",
+
+    },
+    content: {
+        flex: 1,
+        paddingHorizontal: responsiveWidth(5),
+    },
+
+})
 export default ProfileScreen;