feat: UserSettings

components/home/userSettings/Setting.tsx

@@ -0,0 +1,66 @@
+import { View, Text, StyleSheet, Switch, SwitchProps, useColorScheme, TouchableOpacityProps, TouchableOpacity, ViewProps } from 'react-native'
+import React from 'react'
+import { SIZES } from '../../../constants/theme'
+import { useThemeColor } from '../../../hooks/useThemeColor';
+import { CustomCard } from "../../"
+import { useTheme } from '../../../app/contexts/ThemeContext';
+
+interface ToggleSettingProps extends SwitchProps {
+  settingsTitle: string;
+}
+
+export function ToggleSetting(props: ToggleSettingProps) {
+  const {settingsTitle, ...rest} = props;
+  const { colors } = useTheme()
+
+  return (
+
+    <View style={[{ backgroundColor: colors.containerColor}, styles.settingsTile]}>
+      <Text style={[styles.settingTitle, {color: rest.disabled ? colors.secondaryText: colors.primaryText }]}>
+       {settingsTitle}
+      </Text>
+      <Switch 
+        {...rest}
+        thumbColor={rest.thumbColor === undefined ? colors.accentColor: rest.thumbColor}
+        trackColor={rest.trackColor === undefined ? {true: "#E88C3F", false: colors.elementDefaultColor}: rest.trackColor}
+
+        ></Switch>
+    </View>
+   
+  )
+}
+
+interface ButtonSettingProps extends TouchableOpacityProps {
+  settingsTitle: string,
+}
+
+export function ButtonSetting(props: ButtonSettingProps){
+  const {settingsTitle, ...rest} = props;
+  const { colors } = useTheme();
+
+  return (
+    <TouchableOpacity {...rest}>
+      <View style={[styles.settingsTile, {backgroundColor: colors.containerColor}]}>
+        <Text style={[styles.settingTitle, {color: colors.primaryText}]}>{settingsTitle}</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+
+const styles = StyleSheet.create({
+  settingTitle: {
+    fontSize: SIZES.large
+  },
+  settingsTile: {
+      width: "100%",
+      minHeight: 60,
+      paddingVertical: 5,
+      paddingHorizontal: 20,
+      borderRadius: 80,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 10
+  }
+})

components/index.tsx

@@ -1,11 +1,13 @@
 //home
 import ExpenseItem from "./home/expenseItem/expenseItem"
 import Welcome from "./home/Welcome/Welcome"
+import { ToggleSetting, ButtonSetting } from "./home/userSettings/Setting"
 
 //common
 import LoadingSymbol from "./common/loadingSymbol/loadingSymbol"
 import Plus from "./common/plus/plus"
 import SearchBar from "./common/searchBar/SearchBar"
+import CustomCard from "./common/customCard/CustomCard"
 
 
 //login
@@ -14,6 +16,8 @@ import Input from "./login/input"
 export {
   ExpenseItem, Input,
   LoadingSymbol, Plus,
-  SearchBar, Welcome
+  SearchBar, Welcome,
+  ToggleSetting, CustomCard,
+  ButtonSetting
 }