Add files via upload

7_shared/UI/DatePicker/CustomDatePicker.tsx

@@ -0,0 +1,56 @@
+
+import { Pressable, Text, View } from 'react-native'
+import React, { FC, useState } from 'react'
+import DatePicker from 'react-native-date-picker'
+import { useTheme } from '../../hooks/useTheme';
+import { getStyles } from './styles';
+import { MediumButton } from '../buttons/mediumButton/MediumButton';
+interface CustomDatePickerProps{
+    setDateModalVisible:React.Dispatch<React.SetStateAction<boolean>>;
+    onChange: (date: string|undefined) => void;
+
+}
+export const CustomDatePicker:FC<CustomDatePickerProps>=({setDateModalVisible,onChange})=>{  
+  const styles = useTheme(getStyles)
+
+  const [date, setDate] = useState(new Date())
+  const closeModal = ()=>{
+    setDateModalVisible(false)
+  }
+  const confirmDate = ()=>{
+    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+    onChange(formattedDate);
+    closeModal()
+  }
+
+  return (
+    <View style={styles.datePicker}>
+        <Pressable onPress={closeModal} style={styles.closeArea}>
+        </Pressable>
+
+        <View style={styles.datePickerContent}>
+            <View style ={styles.header}>
+                <Text style={styles.headerText}>
+                    Pick the date of your dirth
+                </Text>
+            </View>
+            <DatePicker
+                mode='date'
+                date={date}
+                textColor={styles.dateColor.color}
+                onDateChange={(newDate) => {
+                setDate(newDate)
+                }}
+            />
+        </View>
+        <View style={styles.datePickerContentBottomPart}>
+            <View style={styles.buttonConfirm}>  
+                <MediumButton name='Confirm' onPress={()=>{confirmDate()}}/>
+            </View>
+            <View style={styles.button}>  
+                <MediumButton name='Cansel' isCansel onPress={closeModal}/>
+            </View>
+        </View>
+    </View>     
+  )
+}

7_shared/UI/DatePicker/styles.ts

@@ -0,0 +1,65 @@
+import { StyleSheet } from "react-native";
+import { ThemeType } from "../../../7_shared/theme";
+import { typography } from "../../../../typography";
+
+export const getStyles =(theme:ThemeType)=> StyleSheet.create({
+    datePicker:{
+        width:"100%",
+        height:"100%",
+        justifyContent:"center",
+        alignItems:"center"
+    },
+    closeArea:{
+        position:"absolute",
+        width:"100%",
+        height:"100%",
+        backgroundColor: 'rgba(52, 52, 52, 0.6)',
+        zIndex:0
+       },
+    datePickerContent:{
+        backgroundColor:theme.grayscale.white,
+        width:"95%",
+        borderRadius:16,
+        paddingTop:16,
+        paddingLeft:10,
+        paddingRight:10,
+        paddingBottom:16,
+        justifyContent:"center",
+        alignItems:"center"
+    },
+    datePickerContentBottomPart:{
+        backgroundColor:theme.grayscale.white,
+        width:"95%",
+        height:88,
+        marginTop:30,
+        borderRadius:16,
+        justifyContent:"center",
+        alignItems:"center",
+        overflow:"hidden"
+    },
+    header:{
+        borderBottomWidth:1,
+        borderBottomColor:theme.grayscale.grayscale400,
+        justifyContent:"center",
+        alignItems:"center",
+        width:"95%"
+    },
+    headerText:{
+        ...typography.bodyRegular16,
+        color:theme.additional.headerDatePickColor,
+        marginBottom:18
+    },
+    dateColor:{
+        color:theme.grayscale.grayscale700
+    },
+    button:{
+        height:"50%",
+        width:"110%"
+    },
+    buttonConfirm:{
+        height:"50%",
+        width:"110%",
+        borderBottomWidth:1,
+        borderBottomColor:theme.grayscale.grayscale300
+    }
+});

7_shared/UI/Eye/Eye.tsx

@@ -0,0 +1,33 @@
+import { View, Text, Pressable, PressableProps } from 'react-native'
+import React, { FC } from 'react'
+import SvgEye from '../../../../--no-index/eye'
+import { getStyles } from './styles'
+import { useTheme } from '../../hooks/useTheme'
+import SvgEyeClosed from '../../../../--no-index/eye-closed'
+type EyeProps={
+    showPassword:boolean;
+    isError:boolean;
+    isActive:boolean
+}&PressableProps
+export const Eye:FC<EyeProps> = ({showPassword,onPress,isError,isActive}) =>{
+  const styles = useTheme(getStyles); 
+  const checkCurrentStatus =()=>{
+    if(isError)
+    {
+        return styles.errorColor.color
+    }
+    if(isActive){
+        return styles.activeColor.color
+    }
+    return styles.defaultColor.color
+  }
+  return (
+    <Pressable onPress={onPress}>
+        {showPassword?
+            <SvgEye fill={checkCurrentStatus()}/>
+            :
+            <SvgEyeClosed fill={checkCurrentStatus()}/>
+        }
+    </Pressable>
+  )
+}

7_shared/UI/Eye/styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+import { ThemeType } from "../../theme";
+
+export const getStyles =(theme:ThemeType) => StyleSheet.create({
+    defaultColor:{
+       color:theme.grayscale.grayscale400
+    },
+    errorColor:{
+        color:theme.additional.error
+    },
+    activeColor:{
+        color:theme.grayscale.grayscale700
+    }
+});

7_shared/UI/PostImage/PostImage.tsx

@@ -0,0 +1,17 @@
+import { View, Image } from 'react-native'
+import React, { FC } from 'react'
+import { useTheme } from '../../hooks/useTheme'
+import { getStyles } from './styles'
+
+type PostImageProps = { 
+    imagePath?:string
+}
+
+export const PostImage:FC<PostImageProps>=({imagePath})=> {
+  const style = useTheme(getStyles);
+  return (
+    <View style={style.imagePost}>
+      <Image source={{uri:imagePath}}/>
+    </View>
+  )
+}

7_shared/UI/PostImage/styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { ThemeType } from "../../../7_shared/theme";
+
+export const getStyles =(theme:ThemeType)=> StyleSheet.create({
+    imagePost:{
+        width:343,
+        height:226,
+        borderRadius:16
+    }
+});

7_shared/UI/TextInput/TextIntput.tsx

@@ -0,0 +1,74 @@
+import React, { FC, useState } from 'react';
+import { View, TextInput as RNTextInput, Text, StyleProp, Image ,ImageSourcePropType,TextStyle, Pressable, PressableProps, TextInput} from 'react-native';
+import { getStyles } from './styles';
+import { useTheme } from '../../hooks/useTheme';
+
+interface TextInputProps{
+  label: string,
+  name:string
+  defaultValue?:string
+  value:string|undefined
+  placeholder:string
+  source?:ImageSourcePropType | undefined
+  isError?:boolean
+  isPassword?:boolean
+  icon?:React.ReactNode
+  isActive:boolean
+  editable?:boolean
+  onChange?:()=>void,
+  onBlur:()=>void,
+  onPress?:()=>void
+  multiline?:boolean
+}
+export const Input = (props: TextInputProps) => {
+    const {
+      name,
+      label,
+      defaultValue,
+      placeholder,
+      isError,
+      icon,
+      editable,
+      isPassword,
+      value,
+      multiline,
+      onChange,
+      onBlur,
+      onPress,
+      ...inputProps
+    }   = props;
+
+    const styles= useTheme(getStyles)
+    const [isActive,setIsActive] = useState(false);
+
+    return (
+    <View style={styles.container}>
+        {label && (<Text style={!isError?styles.label:styles.errorLabel}>{label}</Text>)}
+        <View style={[
+        styles.border,
+        isError&&styles.borderError,
+        isActive&&styles.activeBorder]}>
+            <TextInput
+            onPressIn={onPress}
+                style={
+                  [styles.input,
+                    isError&&styles.errorInput,
+                  ]
+                }
+                secureTextEntry={isPassword}
+                onChangeText={onChange}
+                onBlur={onBlur}
+                onChange={onChange}
+                defaultValue={defaultValue}
+                value={value}
+                placeholder={placeholder}
+                placeholderTextColor={!isError?"#9B9B9B":"#C2534C"} 
+                {...inputProps}
+                editable={editable}
+                multiline={multiline}
+            />
+            {icon}
+        </View>
+      </View>
+    );
+  }

7_shared/UI/TextInput/styles.ts

@@ -0,0 +1,61 @@
+import { StyleSheet } from "react-native";
+import { ThemeType } from "../../theme";
+import { typography } from "../../../../typography";
+
+export const getStyles =(theme:ThemeType)=> StyleSheet.create({
+    label: {
+      color: theme.grayscale.grayscale500,
+      fontWeight:'500',
+      marginLeft: 0,
+    },
+    container:{
+      marginTop:16
+    },
+    input:{
+      width:343,
+      paddingTop:15,
+      paddingBottom:15,
+      ...typography.bodyRegular16,
+      color:  theme.grayscale.grayscale700,
+      position:"relative",
+    },
+    border:{
+      borderBottomWidth:1,
+      borderBottomColor: theme.grayscale.grayscale500,
+    },
+    borderError:{
+      borderBottomWidth:1,
+      borderBottomColor:theme.additional.error,
+    },
+    icon:{
+    position:"absolute",
+    right:0,
+    top:"35%",
+    },
+    errorLabel:{
+      fontWeight:'500',
+      marginLeft: 0,
+      color:theme.additional.error
+    },
+    errorInput:{
+      height: 49,
+      padding:0,
+      ...typography.bodyRegular16,
+      position:"relative",
+      color:theme.additional.error
+    },
+    activeInput:{
+      height: 49,
+      padding:0,
+      ...typography.bodyRegular16,
+      borderBottomWidth:1,
+      borderBottomColor: theme.grayscale.white,
+      color:  theme.grayscale.grayscale700,
+      position:"relative",
+    },
+    activeBorder:{
+      borderBottomWidth:1,
+      borderBottomColor: theme.grayscale.grayscale700,
+    }
+  });
+

7_shared/UI/buttons/bigButton/BigButton.tsx

@@ -0,0 +1,32 @@
+import { View, Text, Pressable,StyleProp,ViewStyle, PressableProps } from 'react-native'
+import React, { FC, useState } from 'react'
+import {getStyles} from './styles'
+import { useTheme } from '../../../hooks/useTheme'
+
+type CustomButtonProps = {
+  name:string,
+}&PressableProps
+export const BigButton:FC<CustomButtonProps>=({name,onPress,disabled})=>{
+  const styles = useTheme(getStyles);
+  const [textPressed,setPressed]= useState(false);
+  return (
+      <Pressable style={({pressed})=>[
+        styles.buttonStyles,
+        pressed&&styles.pressedButton,
+        disabled&&styles.disabledButton
+      ]}
+      onPress={onPress}
+      onPressIn={()=>{setPressed(true)}}
+      onPressOut={()=>{setPressed(false)}}
+      >
+        <Text style={
+          [styles.buttonText,
+          textPressed&&styles.pressedButtonText,
+          disabled&&styles.disabledText
+          ]
+        } >
+          {name}
+        </Text>
+      </Pressable>
+  )
+}