This repository has been archived on 2026-04-20. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
interaktive-systeme/components/home/userSettings/Setting.tsx
2023-12-17 19:26:15 +01:00

66 lines
No EOL
1.9 KiB
TypeScript

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
}
})