Resolve "Budget"

components/home/Setting.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Switch, SwitchProps, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+import { SIZES } from '../../constants/theme';
+
+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
+  }
+})