Files
cally/components/pages/calendar/CalendarViewSwitch.tsx
Milan Paunovic 580104d052 Month cal changes
2025-01-23 02:16:07 +01:00

94 lines
2.8 KiB
TypeScript

import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import React, {useState, useCallback} from "react";
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
const CalendarViewSwitch = () => {
const [isFamilyView, setIsFamilyView] = useAtom(isFamilyViewAtom);
const [localState, setLocalState] = useState(isFamilyView);
const handleViewChange = useCallback((newValue: boolean) => {
setLocalState(newValue);
setTimeout(() => {
setIsFamilyView(newValue);
}, 150);
}, [setIsFamilyView]);
return (
<View
row
spread
style={{
position: "absolute",
bottom: 20,
left: 20,
borderRadius: 30,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
shadowColor: "#000",
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 6,
}}
centerV
>
<TouchableOpacity
onPress={() => handleViewChange(true)}
>
<View
centerV
centerH
height={40}
paddingH-15
style={localState ? styles.switchBtnActive : styles.switchBtn}
>
<Text
color={localState ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
Family View
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleViewChange(false)}
>
<View
centerV
centerH
height={40}
paddingH-15
style={!localState ? styles.switchBtnActive : styles.switchBtn}
>
<Text
color={!localState ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
My View
</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CalendarViewSwitch;
const styles = StyleSheet.create({
switchBtnActive: {
backgroundColor: "#a1a1a1",
borderRadius: 50,
},
switchBtn: {
backgroundColor: "white",
borderRadius: 50,
},
switchTxt: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
});